jQuery將下邊框添加到元素

Question

我試圖在用戶滾動某個點後向元素添加bottom border。由於某種原因，這個腳本沒有做任何事。代碼如下：

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

     if(posFromTop > 515){ 
      // if more than 200px from the top do something 
      $(function(){ 
       $(".menu").css({ border-bottom: "2px solid #ff4141": }); 
      }); 
     } else { 
      // otherwise do something else. 
      $(function(){ 
       $(".menu").css({ 'border-bottom', 'none': }); 
      }); 
     } 
    }); 
}); 

非常感謝您的幫助。

Answer 1

• 你忘了上border-bottom添加appostrofs /報價，或者您可以使用borderBottom
• $(function(){它的快捷方式$(document).ready(function(){，所以不要把它作爲wraper
• 您可以使用的if/else速記(condition ? true : false) ...或者你可以緩存元素來改善這樣的性能：$menu = $('.menu')然後用$menu.css(...

jQuery代碼：

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     var posFromTop = $(window).scrollTop(); 
     $(".menu").css({ 'border-bottom': (posFromTop>515 ? "2px solid #ff4141" : "none") }); 
    }); 
}); 

Answer 2

使用駱駝情況語法：

$(".menu").css({ borderBottom: "2px solid #ff4141": }); 

或包裹財產報價：

$(".menu").css({ "border-bottom": "2px solid #ff4141": }); 

而此行是錯誤的：

$(".menu").css({ 'border-bottom', 'none': }); 

應該是：

$(".menu").css({ borderBottom : 'none' });