滚动下来后粘滞的标题
我在这个网站上看到了这个粘性标题： http ： //dunked.com/ （不再有效， 查看存档的网站 ）
当您向下滚动时，粘性标题从顶部向下。
我查看了代码，但看起来很复杂。 我只明白这一点：正常的标题是用JS克隆的，当你向下滚动页面时，它从顶部开始动画。
这是一个开始 。 基本上，我们在加载时复制标题，然后检查（使用.scrollTop()或window.scrollY ）以查看用户何时滚动超过一个点（例如200像素）。 然后我们只需切换一个类（在本例中为.down ），它将原始视图移动到视图中。
最后，我们需要做的就是应用一个transition: top 0.2s ease-in我们的克隆中，这样当它处于.down状态时它会滑入视图。 Dunked做得更好，但有一点玩耍它很容易配置
CSS
header { position: relative; width: 100%; height: 60px; } header.clone { position: fixed; top: -65px; left: 0; right: 0; z-index: 999; transition: 0.2s top cubic-bezier(.3,.73,.3,.74); } body.down header.clone { top: 0; }
香草JS （根据需要填充）
var sticky = { sticky_after: 200, init: function() { this.header = document.getElementsByTagName("header")[0]; this.clone = this.header.cloneNode(true); this.clone.classList.add("clone"); this.header.insertBefore(this.clone); this.scroll(); this.events(); }, scroll: function() { if(window.scrollY > this.sticky_after) { document.body.classList.add("down"); } else { document.body.classList.remove("down"); } }, events: function() { window.addEventListener("scroll", this.scroll.bind(this)); } }; document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));
或者 jQuery
$(document).ready(function() { var $header = $("header"), $clone = $header.before($header.clone().addClass("clone")); $(window).on("scroll", function() { var fromTop = $("body").scrollTop(); $('body').toggleClass("down", (fromTop > 200)); }); });
更新的思考
虽然上面回答了OP的原始问题“Dunked如何实现这种效果？” ，我不推荐这种方法。 对于初学者来说，复制整个顶部导航可能非常昂贵，并且我们没有真正的理由不能使用原始版本（只需要一点点工作）。
此外，Paul Irish和其他人已经写过关于如何使用translate()动画比使用top动画更好。 它不仅性能更高，而且还意味着您不需要知道元素的确切高度。 上面的解决方案将使用以下内容进行修改（请参阅JSFiddle） ：
header.clone { position: fixed; top: 0; left: 0; right: 0; transform: translateY(-100%); transition: 0.2s transform cubic-bezier(.3,.73,.3,.74); } body.down header.clone { transform: translateY(0); }
使用转换的唯一缺点是，虽然浏览器支持非常好 ，但您可能希望添加供应商前缀版本以最大限度地提高兼容性。
这是一个JS小提琴http://jsfiddle.net/ke9kW/1/
正如其他人所说，将标题设置为fixed，并使用display：none启动它
然后是jQuery
$(window).scroll(function () { if ( $(this).scrollTop() > 200 && !$('header').hasClass('open') ) { $('header').addClass('open'); $('header').slideDown(); } else if ( $(this).scrollTop() <= 200 ) { $('header').removeClass('open'); $('header').slideUp(); } });
其中200是您希望它向下移动的像素高度。 添加open类是为了允许我们运行elseif而不是else，所以有些代码不会在每个scrolllevent上运行，节省了一点点内存
这里有一个jQuery插件列表，可以帮助实现类似的效果： http ： //jquery-plugins.net/tag/sticky-scroll
我使用jQuery .scroll（）函数使用scrollTop跟踪工具栏滚动值的事件。 然后我使用条件来确定它是否大于我想要替换的值。 在下面的例子中，它是“结果”。 如果值为true，则results-label添加了类“fixedSimilarLabel”，然后考虑新样式。
$('.toolbar').scroll(function (e) { //console.info(e.currentTarget.scrollTop); if (e.currentTarget.scrollTop >= 130) { $('.results-label').addClass('fixedSimilarLabel'); } else { $('.results-label').removeClass('fixedSimilarLabel'); } });
使用jquery的类似解决方案是：
$(window).scroll(function () { $('.header').css('position','fixed'); });
这会在滚动时立即将标题转换为固定位置元素
添加去抖动，以提高效率http://davidwalsh.name/javascript-debounce-function
CSS：
header.sticky { font-size: 24px; line-height: 48px; height: 48px; background: #efc47D; text-align: left; padding-left: 20px; }
JS：
$(window).scroll(function() { if ($(this).scrollTop() > 100){ $('header').addClass("sticky"); } else{ $('header').removeClass("sticky"); } });
这在Firefox中不起作用。
我们根据代码是否将溢出放在html级别添加了条件。 请参阅Animate scrollTop无法在Firefox中运行 。
var $header = $("#header #menu-wrap-left"), $clone = $header.before($header.clone().addClass("clone")); $(window).on("scroll", function() { var fromTop = Array(); fromTop["body"] = $("body").scrollTop(); fromTop["html"] = $("body,html").scrollTop(); if (fromTop["body"]) $('body').toggleClass("down", (fromTop["body"] > 650)); if (fromTop["html"]) $('body,html').toggleClass("down", (fromTop["html"] > 650)); });
我建议使用粘性js，它有我见过的最佳选择。 无事可做只是广告这个js在你身上
https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js
并使用以下代码：
它的git repo： https ： //github.com/garand/sticky
窗口底部使用jquery滚动到顶部滚动。