想要的菜單固定在滾動條的頂部

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>