Question

Html ----包含我的内容

  <header1>
   ..............
 </header1>

JS

<script>
$(document).ready(function() {
var $header1 = $("header1"),
$clone = $header1.before($header1.clone().addClass("clone"));

 $(window).on("scroll", function() {
var fromTop = $("body").scrollTop();
$('body').toggleClass("down", (fromTop > 200));
});
});
</script>

的CSS

header1.clone {
position: fixed;
top: -120px;
transition: 0.1s top ease-in;
}

body.down header1.clone {
top: 0;
left: 0;
right: 0;
z-index: 999;
 }

这在谷歌浏览器中运行良好，但在Firefox中没有...在这个问题上帮助我.....

Answer 1

您可以使用CSS实现此目的：

fixedCSS
{
position: fixed;
top:0; left:0;
width: 100%;
}

使用JQuery应用此类，如：

<script>
$(document).ready(function() {
var $header1 = $("header1"),
$clone = $header1.before($header1.clone().addClass("clone"));

 $(window).on("scroll", function() {
    if ($(window).scrollTop() > 200) {
       $('.header1').addClass('fixedCSS');
    }
    else {
       $('.header1').removeClass('fixedCSS');
    }

});
});
</script>

Answer 2

好像你需要一个总是显示的标题，所以为什么不使用CSS？

header {position:fixed;}

滚动时的标题常量

2 个答案: