html文檔沒有足夠的高度時，菜單固定在滾動條頂部的問題？

Question

滾動時我在頂部固定了一個菜單，可以確定某些頁面的高度很大，但是頁面的高度不夠，此腳本循環如下：

例：

我有高度為50px的菜單，並編寫了一個腳本：

if ($(this).scrollTop() > 50){
    // add class fixed
} else { //remove class }

• 在運行高度較大的頁面上： scroll(over 50px) > add class
• 在運行高度較小的頁面上： scroll(over 50px) > add class > remove class

請參見以下示例： http : //jsfiddle.net/F4BmP/2930/

Answer 1

使用此javascript：

$(document).ready(function(){
var elementPosition = $('.menu').offset();

$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top){
              $('.menu').css('position','fixed').css('top','0');
              $('.menu').css('width','100%');
              $('.menu').css('z-index','500');
        } else {
            $('.menu').css('position','static');
        }    
});
});

好的，即使屏幕大小不同，此代碼也可以在我的菜單欄上運行。

Answer 2

基本概念是用戶在滾動頁面時必須查看菜單。

但是您的功能是正確的，沒有太多內容，用戶可以在當前屏幕本身中看到菜單。 如果有更多內容，用戶可以滾動並始終在頂部獲得即時貼菜單。

如果您真的想使瀏覽器滾動，則可以指定容器的min-height 。

例

.containerclassname{
  min-height: 1500px;
}

Answer 3

我在Firefox和chrome中測試了您的代碼，問題似乎出在chrome中。 我修改了html和JS的代碼，因此在任何瀏覽器中都可以在chrome中正常工作。

這可能應該為您工作：

 $(document).ready(function(){
             $(window).scroll(function (e) {
                    $el = $('.nav');
                    if ($(this).scrollTop() > 100) {
                        $('.nav').addClass("fixedNav");
                    }else {
                        $('.nav').removeClass("fixedNav");
                    }
                });
             });

整個代碼放在小提琴中。

鏈接到小提琴

親切的問候 。

亞歷山大。

Answer 4

最后，我為我的問題找到了解決方案。

原因是菜單從靜態更改為固定時HTML文檔丟失了高度。解說：瀏覽器具有500px並具有滾動條，當用戶將我的菜單更改為固定並瀏覽器丟失了50px的菜單時，瀏覽器的高度不足以具有滾動條，它將返回首頁並在ELSE語句中執行代碼行。

因此，我添加了一個div包裝菜單，並將高度設置為與菜單相同的高度，這將使滾動前后文檔的高度始終相同：

<div id="wrap" style="height:50px;width:100%">
      <div id="mymenu"></div>
</div>

此解決方案解決了我的問題。