Home/ Questions/Q 7924167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T17:36:35+00:00

I need your help. I made a nav bar that links to anchor locations

  • 0

I need your help.

I made a nav bar that links to anchor locations on the same page, allowing the view port to scroll down when clicked(nothing complicated).

The problem: There is a big cover page up at the top that uses web transitions and shrinks a height of 0. The nav links think there is a big page in the way and scroll down too far.

Does anyone have a solution?? Maybe Jquery that detects scrollTop() and uses if statements to adjust/offset() the location??

HERE IS THE LINK: [www.imbenton.com][1]

Code:

    var $window = $(window);    
    $window.bind('scroll', function(){  
    var pos = $(window).scrollTop();    

        if (pos > 2){
            $('#cover').addClass("alt");
            $('#cover img').addClass("alt");
            $('.logo').addClass("alt");
            $('nav').addClass("still");
            $('.navhead').addClass("still");
        }   
        if (pos < 1){
            $('nav').removeClass("alt");    
            $('#cover').removeClass("alt");
            $('#cover img').removeClass("alt");         
            $('.logo').removeClass("alt");
            $('nav').removeClass("still");
            $('.navhead').removeClass("still");
        }       
});

———– CSS ———-

#cover img{ 
    max-width: 90%; 
    padding: 300px 0 600px 0;
    margin: 0 auto;
  -webkit-transition: all 0.8s ease-out;
     -moz-transition: all 0.8s ease-out;
      -ms-transition: all 0.8s ease-out;
       -o-transition: all 0.8s ease-out;
          transition: all 0.8s ease-out;
}


#cover img.alt{
background: url("dvsup.png") repeat fixed;  
    max-width: 0%;  
    padding: 100px 0;
    margin: 0 auto;
} 

nav {
    position: fixed;
    width: 100%;
    top: 173px;
    padding: 0px 0 5px 0;
    text-align: center;
    height: auto;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    z-index: 999;

}
nav.still{
    position: fixed;
    top: -980px;
    padding-top: 900px;
    background: url("dvsup.png") repeat fixed;  

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The page is kind of cool but also kind of a bad experience too. Can you post some code as to how it works?

    You can always have the cover page as an overlay on top that way the height should be calculated correctly or if you know the difference in height that’s getting miscalculated you can always adjust the scroll y position

    Update:

    I have an untested idea, use jquery to put padding or margin to the top of your content (not cover page). This space should be equals to the height of the cover page. This might correct the calculation, you will have to test it out. Can you also post some html? Unless the links are just internal links then don’t worry about the html

    • 0