jquery css_使用CSS或jQuery的粘性位置（栏）

“粘性位置”的想法是使网站上的元素固定并保持可见 。 这些元素最初将处于其位置，然后在向下滚动网页时，其位置将跟随滚动。

在Facebook中，此技术已应用于他们的侧边栏。 当我们向下滚动页面时，您会发现它跟随滚动并因此保持可见。

多年来，这种做法是使用JavaScript或jQuery完成的，如下所示。

jQuery方式

在此示例中，我们将创建一个包含标题，导航和内容的简单网页。

<div class="wrapper">
	<div class="header">
		Header
	</div>
	<div class="nav">
		Navigation
	</div>
	<div class="content">
		<p>Candy canes tart pie biscuit. Cupcake liquorice cake dessert tootsie roll 
		applicake pastry. ...</p>
	</div>
</div>

并且，我们将粘性位置应用于导航。

但是首先，我们将像这样在样式表中定义样式。

.sticky {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	border-top: 0;
}

然后，我们将使用jQuery 有条件地将该类应用于导航。

$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();
     
if (scrollTop > stickyNavTop) { 
    $('.nav').addClass('sticky');
} else {
    $('.nav').removeClass('sticky'); 
}
};

stickyNav();

$(window).scroll(function() {
	stickyNav();
});
});

最后，您可以从下面的链接查看演示。

• 观看演示

好吧，这种方式对于不熟悉jQuery的人来说可能有点令人费解。 另外，使用jQuery要达到相同的效果要容易一些–您可以使用ScrollToFixed插件。 否则，让我们看看CSS的另一种方式。

CSS方式

最近，Webkit引入了一个新的位置值，简称为sticky ，它的功能与上述jQuery代码相同。 但是，由于此sticky值仍被确定为实验功能 ，因此我们需要首先启用此功能。

假设您当前的Chrome版本为23及更高版本，则可以在地址栏中输入以下内容： chrome://flags 。 否则，您需要先对其进行更新。

然后，在列表中找到以下部分“ 启用实验性WebKit功能 ”并将此功能设置为“ 启用” 。

在样式表中，我们只需将导航位置设置为sticky即可 。 但是，由于仅在Webkit上可用，因此只能与前缀一起使用，就像这样。

.nav {
	position: -webkit-sticky;
	top: 0;
	z-index: 1;
}

现在，导航应该以与jQuery相同的方式起作用。 请参阅以下Google Chrome Canary中的演示，以查看实际操作。

• 观看演示
• 下载源

但是，如上所述，此功能是实验性的，但仍适用于任何当前浏览器。

翻译自: https://www.hongkiat.com/blog/css-sticky-position/