jquery – 如何修复标题在滚动

前端之家收集整理的这篇文章主要介绍了jquery – 如何修复标题在滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建一个标题,一旦滚动到一定数量的像素,它修复并保持原位。

我可以使用css和html这样做,还是需要jquery吗?

我已经创建了一个演示,所以你可以理解。任何帮助将是伟大的!

http://jsfiddle.net/gxRC9/4/

body{
    margin:0px;
    padding:0px;
}
.clear{
    clear:both;
}
.container{
    height:2000px;
}
.cover-photo-container{
width:700px;
height: 348px;
margin-bottom: 20px;
background-color:red;
}

.small-Box{
    width:163px;
    height:100px;
    border:1px solid blue;
    float:left;
}

.sticky-header{
    width:700px;
    height:50px;
    background:orange;
    postion:fixed;
}

解决方法

你需要一些JS来做滚动事件。最好的方法是为固定位置设置一个新的CSS类,当滚动超过某一点时,该类将被分配给相关的div。

HTML

<div class="sticky"></div>

CSS

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

jQuery的

$(window).scroll(function(){
  var sticky = $('.sticky'),scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

示例小提琴:http://jsfiddle.net/gxRC9/501/

编辑:扩展的例子

如果触发点未知,但是当粘性元素到达屏幕顶部时,可以使用offset()。top。

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

扩展示例:http://jsfiddle.net/gxRC9/502/

原文链接:https://www.f2er.com/jquery/183029.html

猜你在找的jQuery相关文章