Question

我的JQuery需要一些帮助。

我想在滚动后更改标题的CSS，但无法使其正常工作。唯一必须在css中改变的是65px的边距并删除徽标。

#menuheader {
background: -webkit-gradient(linear, center top, center bottom, from(#fff),to(#ccc));
background-image: linear-gradient(#fff, #ccc);
box-shadow: 3px 3px 3px 3px #333;
height: 40px;
position: relative;
margin: 165px auto 0;
z-index: 10;}

非常感谢提前。杰森

Answer 1

假设您想在滚动超过某一点后更改CSS，然后在使用jQuery滚动回特定点后还原CSS：

$(window).scroll(function() {

    //After scrolling 100px from the top...
    if ( $(window).scrollTop() >= 100 ) {
        $('#logo').css('display', 'none');
        $('#menuheader').css('margin', '65px auto 0');

    //Otherwise remove inline styles and thereby revert to original stying
    } else {
        $('#logo, #menuheader').attr('style', '');

    }
});

然后您需要做的就是将100换成任何一点（从顶部向下多少像素，同时滚动）您希望交换CSS。

http://jsfiddle.net/dJh8w/4/

Answer 2

请澄清你的问题。你只需要jquery来改变保证金吗？还是某种滚动处理程序？以下是更改保证金的代码：JSFiddle：

 $('#menuheader').attr("style", "margin:100px auto 0");

Answer 3

将函数绑定到.scroll()并指向$("#menuheader")并执行您想要的任何操作。：）

Answer 4

查看此网站：

http://jsfiddle.net/fbSbT/1/

您可以将最后一项功能更改为：

$(document).on("scrollstop",function() {
   $('#menuheader').css("margin","65px");
   $('#menuheader').css("background","");
});

Answer 5

您可以通过一个简单的Java脚本来完成

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("header").style.padding = "1em 2em";
  } else {
    document.getElementById("header").style.padding = "2em 3em";
  }
}

滚动后更改css标头

5 个答案: