5

我需要一些关于我的 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;}

提前谢谢了。杰森

4

5 回答 5

11

假设您想在滚动超过某个点后更改 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/

于 2013-08-18T17:58:08.210 回答
1

请澄清你的问题。你只需要jquery来改变边距吗？或某种滚动处理程序？这是更改边距的代码：JSFiddle：

 $('#menuheader').attr("style", "margin:100px auto 0");
于 2013-08-18T17:26:30.113 回答
1

你可以通过一个简单的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";
  }
}
于 2020-04-15T10:14:59.547 回答
0

绑定一个函数.scroll()并指向$("#menuheader")并做任何你想做的事情。:)

于 2013-08-18T17:25:20.790 回答
0

看看这个网站：

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

您可以将最后一个函数更改为：

$(document).on("scrollstop",function() {
   $('#menuheader').css("margin","65px");
   $('#menuheader').css("background","");
});
于 2013-08-18T17:28:16.047 回答