滚动后更改CSS页眉

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;}

非常感谢您的提前帮助。 Jason

- Jssonline

Answer 1

如果您希望在滚动超过某个点之后更改CSS，然后在滚动回到某个点后恢复CSS，可以使用jQuery：

$(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', '');

    }
});

然后你只需要用想要CSS被替换的那个点的像素数（在滚动时离顶部多少像素）来替换100即可。

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

- stuajc

---

感谢您的解释。它完全按照我想要的方式工作。 - Jssonline

Answer 2

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

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

- poodle

Answer 3

你可以通过简单的 JavaScript 实现它。

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";
  }
}

- sam kh

---

请在您的CSS中为标题添加填充，除非找不到该属性。 - sam kh

我更喜欢你的解决方案，因为它使用了原生JS。 - Shahriar

Answer 4

看看这个网站：

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

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

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

- esonat

---

可以了！谢谢。只有一个问题，当我向后滚动时，CSS没有返回到原始的CSS。我该怎么解决？链接（我是jQuery的初学者） - Jssonline

你的意思是当 #menuheader 再次可见时，你想将 CSS 改回正常状态吗？ - esonat

Answer 5

将一个函数绑定到 .scroll() 上，使其指向 $("#menuheader")，然后进行任何你想要的操作。 :)

- Rey Libutan