将导航粘贴到滚动网页的顶部不起作用

Question

我正在尝试将一些脚本应用于导航，我希望导航在滚动到页面顶部时保持在页面顶部。我知道这可以像我以前做过的那样完成并且它已经奏效了。不过这次不行了。

我正在使用此代码 - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

网站在这里 - http://www.mjlcarpentryltd.co.uk/

我不知道 javascript 是否不只是 working/kicking 在里面，或者是否有其他样式干扰了某处。任何帮助将不胜感激！

HTML

<div id="navbar">
<nav class="dropdownmenu">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">ABOUT US</a></li>
        <li>
            <a href="#">SERVICES</a>
                <ul id="submenu">
                    <li><a href="cutandpitchroofing.html">CUT AND PITCH ROOFING</a></li>
                    <li><a href="trussroofing.html">TRUSS ROOFING</a></li>
                    <li><a href="1stfixing.html">1ST FIXING</a></li>
                    <li><a href="2ndfixing.html">2ND FIXING</a></li>
                    <li><a href="cladding.html">CLADDING</a></li>
                    <li><a href="staircases.html">STAIRCASES</a></li>
                </ul>
        </li>
    <li><a href="projects.html">PROJECTS</a></li>
    <li><a href="testimonials.html">TESTIMONIALS</a></li>
    <li><a href="gallery.html">GALLERY</a></li>
    <li><a href="contact.html">CONTACT US</a></li>
</ul>

JS

<script>
    window.onscroll = function() {myFunction()};

    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;

    function myFunction() {
    if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
    } else {
    navbar.classList.remove("sticky");
    }
    }
  </script>

CSS

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

nav {
    display: block;
    background-color: #76afdb;
    width: 100%;
    z-index: 99999999;
    float: left;
    position: relative;
}

Answer 1

你试过使用Foundation的置顶功能吗？需要更少的 JS。还是Bootstrap的位置粘性值？这些都是使用导航栏执行所需操作的快捷方式。 link 的进一步解释都在这里： https://foundation.zurb.com/sites/docs/sticky.html https://getbootstrap.com/docs/4.0/utilities/position/

但是，如果您使用 CSS 和您提供的 link 中的 JS：

CSS:

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

JS:

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

这个应该可以，我自己测试过。您的网站还使用了哪些其他 JS 代码？看不到它是否干扰了这个 JS 代码。

Answer 2

这与之前的评论非常相似，根据滚动位置附加 class - 对我来说总是有效。

您的 jquery 将如下所示

 $(document).ready(function(){
 $(window).scroll(function(){
 if ($(window).scrollTop() > 170){
    $('nav').addClass( "nav-fix-top");  
}

  else {

        $('nav').removeClass( "nav-fix-top");
    }
  });
});

"nav-fix-top" class 在 css -

中会有类似下面的内容

position:fixed;
top:0;
left:0;
right:0;
margin:auto;
width:100%;
max-width:2000px

Answer 3

在您的特定情况下，问题似乎在于创建变量的范围，这取决于您的设置。如果将创建变量的两行移动到主函数中，以便它们在函数中是本地的，这应该有效：

window.onscroll = function() {myFunction()};

function myFunction() {
  var navbar = document.getElementById("navbar");
  var sticky = navbar.offsetTop;
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

将导航粘贴到滚动网页的顶部不起作用

Sticking nav to top of webpage on scroll not working

html

javascript

css

sticky

nav