Fixed NavBar on scroll using jQuery

I have my navbar on my page. I had used CSS and jQuery to fix it at the top but when I am selecting any menu item in navbar it doesn't go to that section. Give me the solution.

<header id="index-banner">
  <nav id="navigation" class="banner-header z-depth-0	">
    <ul class="left hide-on-med-and-down">
      <li><a href="http://localhost/project/" class="head"><span>HOME</span></a></li>
      <li><a href="#location" class="head" id="loc"><span>LOCATIONS</span></a>
        <li><a href="faq.php" class="head"><span>FAQ</span></a></li>
      </li>
    </ul>
    <a href="" class="center brand-logo"><img src="img/logo/50.png" class="banner-logo" id="mylogo"></a>
    <ul class="right hide-on-med-and-down">
      <span><li><a href="#menu" class="head">MENU</a></li></span>
      <span><li><a href="contact.php" class="head">CONTACT US</a></li></span>
      <li><img src="img/tunnsingh/face.png" id="tunnsinghface"></li>
      <li>
        <h5 id="call" class="head"><span>989898XXXX</span></h5>
      </li>
    </ul>
    <a href="#" data-activates="slide-out" class="hide-on-large-only button-collapse">&nbsp&nbsp<i class="fa fa-bars"></i></a>
    <div id="slide-out" class="side-nav hide-on-large-only">
      <img src="img/logo/50.png" id="side-nav-logo">
      <img src="img/divider/green.png" class="divide">
      <ul>
        <span><li><a href="http://localhost/project">HOME</a></li></span>
        <span><li><a href="#location" id="locm">LOCATIONS</a></li></span>
        <span><li><a href="#menu">MENU</a></li></span>
        <span><li><a href="faq.php">FAQ</a></li></span>
        <span><li><a href="contact.php">CONTACT US</a></li></span>
      </ul>
    </div>
  </nav>
  <img src="img/banner.jpg" class="hide-on-large-only" id="index-banner">
</header>

1 answer

  • answered 2018-09-17 07:05 Rahul Dhamecha

    You have to define each section with the "id" attribute and then you have to use the "scrollTop" for those navigation which will scroll to those defined "id".

    HTML Code

    <a href="#target-element" class="scroll_to">Scroll to Target Element</a>
    
    <section id=”target-element”>Target Element Content</section>
    

    Jquery Code:

    jQuery('.scroll_to').click(function(e){
        var jump = $(this).attr('href');
        var new_position = $(jump).offset();
        $('html, body').stop().animate({ scrollTop: new_position.top }, 500);
        e.preventDefault();
    });