Jquery添加CSS值不工作

我有一些代碼，當用戶滾動到一定的數量時，添加一個CSS類到一個粘性的菜單欄（滾動的距離取決於屏幕分辨率，所以是在JQuery中計算） - 我想爲此類（.header_scroll）添加一個CSS值，以便它將滾動時指定給該類的元素的高度更改爲另一個動態高度元素（#nav_wrap）的高度Jquery添加CSS值不工作

jQuery("document").ready(function($){ 

     //Find the height of the header 
     var headHeight = $("#header_wrap"); 
     var headerHeight = headHeight.innerHeight(); 

     //Find the height of the nav bar 
     var menuFindHeight = $("#nav_wrap"); 
     var menuHeight = menuFindHeight.innerHeight(); 

     //Add value to class 
     $(".header_scroll").css({"height": menuHeight}); 

     //Add class on scroll 
     var nav = $('#header_wrap'); 

     $(window).scroll(function() { 
      if ($(this).scrollTop() > (headerHeight - menuHeight)) { 
       nav.addClass("header_scroll"); 
      } else { 
       nav.removeClass("header_scroll"); 
      } 
     }); 

    });`

添加類的代碼工作正常，但不管我對這個有什麼變化時，：

//Add value to class 
     $(".header_scroll").css({"height": menuHeight});

部分將不會做任何事情。展望檢查中鉻元素我希望看到

height: xxxpx;

出現在.header_scroll但它不是

來源

2015-08-20 JoeDarsh

顯示你的CSS的'.header_scroll'，如果把代碼片段將是很好 – Guilherme

你加的jQuery？控制檯中的任何錯誤？ –

那麼我認爲'header_scroll'不存在，直到你滾動，那麼它將如何將高度添加到元素？ – epascarello

也許你不能得到的headerHeight正確的價值，那爲什麼不出現在您的檢查工具中。

檢查你得到你#headHeight元件的正確的高度，試試這個：

$(".header_scroll").height(headerHeight);

來源

2015-08-20 14:18:18

$(".header_scroll").css({"height": 200});

這將不是一個height屬性添加到您的CSS規則。相反，它會將style="height: 200px;"添加到.header_scrollHTML元素。

所以，你最終會像一個HTML元素：

<div class="header_scroll" style="height: 200px;"></div>

來源

2015-08-20 14:21:02 MrUpsidown

完美的解釋。 –

Jquery添加CSS值不工作

回答

相關問題