停止Web页面跳转到顶部

我想有粘稠导航栏像这样来更新我的网站：停止Web页面跳转到顶部

<div id ="navbar"> 
    <ul class="nav navbar-nav nav-top"><!--Navigation Bar--> 
     <li class="navbar-brand">TechU</li> 
     <li><a href="index.aspx">About</a></li> 
     <li><a href="projects.aspx">Projects</a></li> 
     <li><a href="resume.aspx">Resume</a></li> 
     <li class="dropdown"><!--Start Dropdown--> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"><!--Dropdown Menu--> 
       <li><a href="#">Facebook <img src="Media/Images/Icons/FaceBook.ico" /></a></li> 
       <li><a href="#">Twitter <img src="Media/Images/Icons/Twitter(1).ico" /></a></li> 
       <li><a href="#">WordPress <img src="Media/Images/Icons/Wordpress.ico" /></a></li> 
       <li><a href="#">Android Apps <img src="Media/Images/Icons/android.png" /></a></li> 
       <li><a href="#">YouTube <img src="Media/Images/Icons/Youtube.ico" /></a></li> 
      </ul><!--End Dropdown Menu--> 
     </li> 
    </ul><!--End Navigation Bar--> 
</div>

这里是我使用JavaScript：

var mn = $(".nav"), 
    hdr = $('#hero').height(); 

    $(window).scroll(function() { 
     var scrollPos = $(this).scrollTop(); 
     if (scrollPos >= hdr) { 
      mn.addClass('navbar-fixed-top'); 
      mn.removeClass('nav-top'); 
     } else { 
      mn.removeClass('navbar-fixed-top'); 
      mn.addClass('nav-top'); 
     } 
    });

我遇到的问题是，如果页面长度不足以滚动，但页面顶部碰到导航栏的顶部，则页面将直接跳回顶部。我的网站是TechUHost.com，所以你可以自己去看看。

谢谢！

来源

2015-09-25 ghost1349

您可以发布小提琴。 – Mark

我会建议不使用引导类，而是建立自己的，因为你可以让它看起来更流畅。像这样的一个CSS类。

来源

2015-09-25 17:20:15 R429km1

您的代码实际上并没有一个引导navbar。根据引导文档，

Be sure to use a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

有实现粘性导航栏的几种方法。假设你不需要响应，我希望下面的代码可以帮助你。

<body> 
    <div id="hero"> 
    ... 
    </div> 
    <nav id ="navbar" class="navbar navbar-default"> 
    <a class="navbar-brand" href="#">TechU</a> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">Resume</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      Social Media 
      <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Facebook</a></li> 
      <li><a href="#">Twitter</a></li> 
      <li><a href="#">WordPress</a></li> 
      <li><a href="#">Android</a></li> 
      <li><a href="#">YouTube</a></li> 
     </ul> 
     </li> 
    </ul> 
    </nav> 
    ... 
    ... 
</body>

和相应的JavaScript是，

var navbar = $("#navbar"); 
    var heroHeight = $('#hero').height(); 
    $(window).scroll(function() { 
    var scrolled = $(this).scrollTop(); 
    if(scrolled >= heroHeight) 
     navbar.addClass('navbar-fixed-top'); 
    else 
     navbar.removeClass('navbar-fixed-top'); 
    });

来源

2015-09-25 19:45:03

停止Web页面跳转到顶部

回答

相关问题