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但它不是

显示你的CSS的'.header_scroll'，如果把代码片段将是很好 – Guilherme

你加的jQuery？控制台中的任何错误？ –

那么我认为'header_scroll'不存在，直到你滚动，那么它将如何将高度添加到元素？ – epascarello

答

也许你不能得到的headerHeight正确的价值，那为什么不出现在您的检查工具中。

检查你得到你#headHeight元件的正确的高度，试试这个：

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

答

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

这将不是一个height属性添加到您的CSS规则。相反，它会将style="height: 200px;"添加到.header_scrollHTML元素。

所以，你最终会像一个HTML元素：

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

完美的解释。 –

Jquery添加CSS值不工作

相关推荐