使用jquery方法將div的CSS位置從絕對更改爲固定

我正在構建一個網站，其中有一個名爲「菜單欄」的div類。它只是一個橫跨屏幕頂部幾百個像素並具有某種背景色的酒吧。我有3個獨立文件中的HTML，CSS和JQuery。使用jquery方法將div的CSS位置從絕對更改爲固定

當用戶向下滾動頁面，當「菜單欄」的頂部到達屏幕的頂部時，我希望它粘在那裏，直到用戶一直滾動到其原始位置。現在，「菜單欄」被設置爲一個絕對的CSS位置。我想我可以使用JQuery方法.removeClass（）和.addClass（）將菜單欄的位置更改爲「固定」。下面是我的代碼。

相關HTML：

<html> 
<body> 
    <div id="page-container"> 
     <div id="header"> 
      <div class="menu-bar"></div> 
     </div> 
    </div> 
</body> 
</html>

相關CSS：

.menu-bar 
    { 
     position: absolute; 
     width: 100%; 
     height: 50px; 
     left: 0; 
     top: 225px; 
     background-color: #11342D; 
     z-index: -1; 
    } 

    .menu-fixed { 
     position: fixed; 
     width: 100%; 
     height: 50px; 
     left: 0; 
     top: 0; 
     background-color: #11342D; 
     z-index: -1; 
    }

jQuery的：

$(document).ready(function(){ 

    var offset = $('menu-bar').offset(); 

     $(window).scroll(function){ 
      var scroll = $(window).scrollTop(); 

      if offset.top < scroll) $('menu-bar').removeClass('menu-bar').addClass('menu-fixed'); 
      else $('menu-bar').removeClass('menu-fixed').addClass('menu-bar'); 
     }); 
    });

的代碼不工作，我一直在爲故障排除天。我究竟做錯了什麼？這裏有一個鏈接到一個網站，幾乎完全是我要找的那種行爲：[https://monocle.com/][1]

謝謝。

更新：下面是適用於任何需要複製此行爲的工作jQuery代碼。

$(document).ready(function(){ 

    var offset = $('.menu-bar').offset(); 

     $(window).scroll(function(){ 
      var scroll = $(window).scrollTop(); 

      if (offset.top < scroll) 
       { 
        $('.menu-bar').removeClass('menu-bar').addClass('menu-fixed'); 
       } 
      else 
       { 
        $('.menu-fixed').removeClass('menu-fixed').addClass('menu-bar'); 
       }  
     }); 
    });

來源

2017-04-14 leschandrew

你if條件的語法不正確，也menu-bar是一類，所以使用.menu-bar

if (offset.top < scroll) //start (bracket was missing 
{ 
    $('.menu-bar').removeClass('menu-bar').addClass('menu-fixed'); 
} 
else 
{ 
    $('.menu-bar').removeClass('menu-fixed').addClass('menu-bar'); 
}

你也可以做

$('.menu-bar').toggleClass('menu-fixed', (offset.top < scroll)); 
$('.menu-fixed').toggleClass('menu-bar', !(offset.top < scroll));

來源

2017-04-14 10:23:18 gurvinder372

太謝謝你了。雖然我知道HTML和CSS，但我剛剛通過jquery.com上的API文檔開始學習jquery。我錯過了另外一個括號「（」在第二個「function（）」上。你介意給我解釋寫下最後一位的第二種方法嗎？你是說可以添加而不是If Else語句嗎？我是假設「，」等於說WHEN評估爲TRUE，而「！」等同於說WHEN評估爲FALSE？ – leschandrew

使用jquery方法將div的CSS位置從絕對更改爲固定

回答

相關問題