Javascript jQuery修复了滚动时标题向下滑动的问题

我是jQuery的新手，请不要严格判断。当我滚动页面300px时，我希望页眉变得固定。如果我会这样做

首先，根据您支持的浏览器，您可以添加以下CSS：

.heading-wrapper {
   position: fixed;
   top: -80px;
   transition: top 1s linear; /*as you wish*/
   [...]
}

.heading-wrapper.relative {
    position: absolute;
    top: 0px;
}

.heading-wrapper:not(.relative).fixed {
    top: 0px;
}

然后在Javascript中：

var $wrapper = $(".heading-wrapper");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;

$wrapper.clone().appendTo("body").addClass("relative");

$win.scroll(function () {
   top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
   if( top > 300)
       setTimeout(function(){$wrapper.addClass("fixed");},0);
   else if( $wrapper.hasClass("fixed") )
      setTimeout(function(){$wrapper.removeClass("fixed");},0);
});

我更新了你的密码

---

编辑：添加了一个克隆菜单，绝对菜单。

以下是我的操作方法

首先，根据您支持的浏览器，您可以添加以下CSS：

.heading-wrapper {
   position: fixed;
   top: -80px;
   transition: top 1s linear; /*as you wish*/
   [...]
}

.heading-wrapper.relative {
    position: absolute;
    top: 0px;
}

.heading-wrapper:not(.relative).fixed {
    top: 0px;
}

然后在Javascript中：

var $wrapper = $(".heading-wrapper");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;

$wrapper.clone().appendTo("body").addClass("relative");

$win.scroll(function () {
   top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
   if( top > 300)
       setTimeout(function(){$wrapper.addClass("fixed");},0);
   else if( $wrapper.hasClass("fixed") )
      setTimeout(function(){$wrapper.removeClass("fixed");},0);
});

我更新了你的密码

编辑：添加了一个克隆的绝对菜单。

js

css

html

js

css

html

谢谢您的回答，但在我向下滚动页面之前，我不需要固定标题包装器。首先，用户应该看到标题的位置：relative；当他向下滚动页面时，他必须看到相同的标题，只有位置：固定。最好的方法是完全添加另一个菜单，这将是相对的。谢谢回答，但我不需要固定。在我向下滚动页面之前，标题包装器。首先，用户应该看到标题的位置：relative；当他向下滚动页面时，他必须看到相同的标题，只有位置：fixed。最好的方法是完全添加另一个菜单，这将是相对的。该死。。我的.heading容器中有链接，点击后会显示弹出窗口，它与克隆不兼容。heading容器：（你可以在这里处理你的问题并共享链接。我会尽力帮助你。我不能移动到JSFIDLE这么多代码，这里是一个基本示例，如果我点击搜索-它打开弹出窗口，在JSFIDLE上它可以工作一半，但在我的网站上它不工作）)这是我网站的一个页面，尝试按带有克隆标题和不带克隆标题的搜索图标。我找到了解决方案，我需要更深层的克隆块，使用克隆（真）该死。。我的.heading容器中有链接，点击后会显示弹出窗口，它与克隆不兼容。heading容器：（你可以在这里处理你的问题并共享链接。我会尽力帮助你。我不能移动到JSFIDLE这么多代码，这里是一个基本示例，如果我点击搜索-它打开弹出窗口，在JSFIDLE上它可以工作一半，但在我的网站上它不工作）)这是我网站的一个页面，尝试按带有克隆标题和不带克隆标题的搜索图标。我找到了解决方案，我需要更深入的克隆块，使用克隆（true）

var $wrapper = $(".heading-wrapper");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;

$wrapper.clone().appendTo("body").addClass("relative");

$win.scroll(function () {
   top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
   if( top > 300)
       setTimeout(function(){$wrapper.addClass("fixed");},0);
   else if( $wrapper.hasClass("fixed") )
      setTimeout(function(){$wrapper.removeClass("fixed");},0);
});

$(document).ready(function () {
    $("header").before($("header").clone().addClass("animateIt"));
    $(window).on("scroll", function () {
        $("body").toggleClass("down", ($(window).scrollTop() > 100));
    });
});

body, html {
    margin:0;
    padding:0;
}
header {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #000;
    color: #fff;
}
header.animateIt {
    position:fixed;
    top:-60px;
    left: 0;
    right: 0;
    z-index:999;
    transition:0.4s top cubic-bezier(.3, .73, .3, .74);
}
body.down header.animateIt {
    top:0;
}
.content {
    padding: 0 20px 20px;
    background: #fff;
    line-height: 1.5;
    color: #333;
}

<header>
    <a href="#">1 </a>
    <a href="#"> 2</a>
    <a href="#"> 3</a>
    <a href="#">4</a>
    <a href="#">5</a>    
</header>