想要的菜单固定在滚动条的顶部

Question

我试图实现一种简单的效果，即在滚动通过某个点时将菜单粘贴到浏览器窗口的顶部，但是出了点问题，菜单也不会固定在顶部。 从库中，我正在使用jQuery并对其进行动画处理。 我的代码如下：

HTML：

<nav class="animatedParent">
    <ul class="animated bounceInUp delay-750">
        <li class="animated"><a href="#">O meni</a></li>
        <li class="animated"><a href="#">Katalog</a></li>
        <li class="animated"><a href="#">Razno</a></li>
    </ul>
</nav>

CSS：

.fixedNav {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba( 0, 0, 0, .8);
    height: 100px;
}

nav {
    width: 400px;
    margin:  20px auto;
}

nav ul {
    list-style: none;
}

nav ul li {
    float: left;
    overflow: auto;
    width: 130px;
}

nav ul li a {
    font-size: 35px;
    font-family: 'Indie Flower', cursive;
    color: #fff;
    cursor: pointer;
    transition: 500ms linear all;
}

nav ul li a:hover {
    color: #123456;
    transition: 500ms linear all;
}

JS（jQuery）：

$(document).ready(function(){
    $("nav ul li").mouseenter(function() {
        $(this).addClass("wiggle");
    });
    $("nav ul li").mouseleave(function() {
        $(this).removeClass("wiggle");
    });

    var nav = $("nav").offsetTop();
    if($(window).scrollTop() > nav) {
        $("nav").addClass("fixedNav");
        console.log('Hello!');
    } else {
        $("nav").removeClass("fixedNav");
    }
});

Answer 1

您需要使用事件scroll并检查那里的偏移量。

当用户滚动时， toggleClass将根据条件$window.scrollTop() > navOffset添加/删除类，该类将返回true或false

var $window = $(window);
var $nav = $('nav');
var navOffset = $nav.offsetTop();

$window.on('scroll', function() {
  $nav.toggleClass('fixedNav', $window.scrollTop() > navOffset);
});

Answer 2

因此，首先，您只需要使用一次代码，即在加载文档时使用一次。 您将需要在每次滚动文档时进行检查，因为一旦滚动一定数量，就会明显触发代码。

 $(document).scroll(function(){ var nav = $("nav").height(); if($(window).scrollTop() > nav) { $("nav").addClass("fixedNav"); } else { $("nav").removeClass("fixedNav"); } }); 

 body { background: black; height:700px; } .fixedNav { display: block; position: fixed; top: 0; width: 100%; background: rgba( 0, 0, 0, .8); height: 100px; } nav { display: block; height: 100px; width: 100%; margin: 20px auto; } nav ul { list-style: none; } nav ul li { float: left; overflow: auto; width: 130px; } nav ul li a { font-size: 35px; font-family: 'Indie Flower', cursive; color: #fff; cursor: pointer; transition: 500ms linear all; } nav ul li a:hover { color: #123456; transition: 500ms linear all; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="animatedParent nav"> <ul class="animated bounceInUp delay-750"> <li class="animated"><a href="#">O meni</a></li> <li class="animated"><a href="#">Katalog</a></li> <li class="animated"><a href="#">Razno</a></li> </ul> </nav> 

Answer 3

添加滚动事件以检查滚动位置

例如：

$(document).scroll(()=>{...});

像这里

这是一个非常简单的演示，仅演示了我的意思

Answer 4

您可以使用诸如scrollMonitor之类的库来完成您的任务，因为滚动监视有其自身的警告。

您可以让scrollMonitor在离开视口时锁定菜单的位置，如下所示：

var $menu = document.querySelector('nav'); // It is better to use CSS class name instead
var watcher = scrollMonitor.create($menu);
watcher.lock();
watcher.exitViewport(function() {
    $menu.classList.add('fixedNav');
});
watcher.enterViewport(function() {
    $menu.classList.remove('fixedNav');
});

请参考此示例，因为它与您的任务非常匹配。

Answer 5

您不会在scroll事件上触发当前滚动的检查。 您正在寻找的活动。 另外，您可以检查文档上的scrollTop（在jQuery中更能证明错误），而不是窗口上，因为它并不总是有效。

$(document).ready(function(){
  $("nav ul li").mouseenter(function() {
    $(this).addClass("wiggle");
  });
  $("nav ul li").mouseleave(function() {
    $(this).removeClass("wiggle");
  });
  $(document).on('scroll', function() {
      var nav = $("nav").offsetTop();
      if($(document).scrollTop() > nav) {
        $("nav").addClass("fixedNav");
        console.log('Hello!');
      } else {
        $("nav").removeClass("fixedNav");
      }
  })
});

Answer 6

那就是您要寻找的：

 $(document).ready(function(){ $("nav ul li").mouseenter(function() { $(this).addClass("wiggle"); }) ; $("nav ul li").mouseleave(function() { $(this).removeClass("wiggle"); }) ; }); $(document).ready(fixedHeader) ; $(window).scroll(fixedHeader) ; function fixedHeader() { var nav = parseInt($("nav").css("margin-top")) ; if($(window).scrollTop() > nav) { $("nav").addClass("fixedNav"); } else { $("nav").removeClass("fixedNav"); } } 

 body{ height: 1000px; } .fixedNav { display: block; position: fixed; top: 0; width: 100%; background: rgba( 0, 0, 0, .8); height: 100px; } nav { width: 400px; margin: 20px auto; } nav ul { list-style: none; } nav ul li { float: left; overflow: auto; width: 130px; } nav ul li a { font-size: 20px; font-family: 'Indie Flower', cursive; color: #fff; cursor: pointer; transition: 500ms linear all; } nav ul li a:hover { color: #123456; transition: 500ms linear all; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="animatedParent"> <ul class="animated bounceInUp delay-750"> <li class="animated"><a href="#">O meni</a></li> <li class="animated"><a href="#">Katalog</a></li> <li class="animated"><a href="#">Razno</a></li> </ul> </nav>