CODEWITHSUNDEEP
javascriptjqueryhtmlcss
TRS7
TRS7

Reputation: 149

Nav Bar Scrolling Too Far on my page

My objective is to have a single-page website. My current issue is with the nav bar at the top of the page. When I click on one of the links in my nav list, it takes me down the page, but it keeps overshooting.

For example, if I click on my second nav li it takes me down the page, but ends up beneath the text in that div. It's the same with the third and fourth pages: the page scrolls down just barely beyond where I want it to end up, i.e., perfectly in line with the start of the title of each page.

HTML:

<body>
<div id="home">                            <!--MAIN DIV TO TAKE YOU BACK TO THE TOP OF THE HOME PAGE-->

<div id="wrapper">

<header>    

<h1>Pretend Restaurant</h1>

<nav class="nav">
<ul>


<li><a href="#home">Home</a></li> 
    <li><a href="#menu">Menu</a></li>
    <li><a href="#aboutus">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#social">Social</a></li>

</ul>

</nav>

<div id="snow"></div>

</header>

<main>

<div id="page1">

<h2 class="category">Welcome to Snow Bar</h2>





 <p><strong>Come relax and enjoy a unique and delicious treat.</strong></p><br>




</div>
<div id="page2">
    <a id="menu" class="smooth"></a>
  <h2>Menu</h2>
    <h4>Recipes</h4>

<p>list of recipes</p>



</div>



  <div id="page3">



 <a id="aboutus" class="smooth"></a>


 <h2>ABOUT US INFO GOES HERE</h2>

</div>

<div id="page4">    


 <a id="contact" class="smooth"></a>


<h2>Contact and Location</h2>

<p>Contact info goes here</p>

</div>

<div id="page5">    
 <a id="social" class="smooth"></a>
<h2>Social media information here</h2>

</div>




</div>

</body>

</main>

CSS

*{
box-sizing: border-box;
font-family: Georgia, Times, serif;
border-radius: 3.5px;
float: center;


}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}

#wrapper{   background-color: #FFFFFF;
        color: #000066;
        min-width: 700px; 
        max-width: 1024px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 0px;
        opacity: 0.86;
        min-height: 900px;
    }

h1 {    font-family: Georgia, Times, serif;
        background-color: darkcyan;
        color: #74ebd5;
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
        font-size: 4em;
        line-height: 80%;
        padding: 30px;


text-shadow: #CCCCCC;
        margin-bottom: 0;
    }

main {  margin-left: 100px;
        padding-bottom: 100px;
     }

.header{    background-color: #000066;
            color: #FFFFFF;
       }

ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #333;


width: 100%;

}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
     box-sizing: border-box;
}

li {
        display: inline-block;
   }


nav{    display:inline-block;
        width: 100%;
        font-weight: bold;
        background-color: grey; 



 position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
    transition: 0.3s;

}




nav ul {
    list-style: none;
    width: 100%;
    text-align: center;
    display:inline-block;
 }



 nav a{text-decoration: none;

        width: 100%} 

nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}

.category {
            font-weight: bold;
            background-color: #FFFFFF;
            color: darkcyan;
            text-align: center;
            font-size: 50px;
            padding-right: 50px;
            padding-left:0;
            }


#page1 { height:1000px;}
#page2 { height:1000px;}
#page3 { height:1000px;}
#page4 { height:1000px;}
#page5 { height:1000px;}

jQuery

$(document).ready(function() {
  var stickyNavTop = $('.nav').offset().top;



 var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) { 
  $('.nav').addClass('sticky');
} else {
  $('.nav').removeClass('sticky'); 
    }
  };



 stickyNav();

  $(window).scroll(function() {


 stickyNav();

  });

});

Upvotes: 1

Views: 1283

Answers (2)

Emmanouel
Emmanouel

Reputation: 1

Yeah thats not true. If you want to adjust for the overshoot You just have to use:

padding-top: 20px

(for example) on the sections you want to adjust.

Upvotes: 0

BrainStack
BrainStack

Reputation: 118

That's exactly how HTML navigation works. You should use javascript to scroll to the right position. The formula will be like: parent.scrollTop = destination.offsetTop - nav.style.height)

$('.nav a').click(function(e) {
      e.preventDefault();
      var $scrooll_to_id = $(this.getAttribute('href'));
      $('html').stop(true).animate({
        scrollTop: ($scrooll_to_id.position().top - $('.nav').height())
      });
  });

Here a fiddle: https://jsfiddle.net/sjquno0r/1/

Upvotes: 2

Related Questions