Question

我试图创建一个效果，而不是当我的用户滚动时，我的h1会粘到窗口的顶部。当父div滚过h1时，然后释放＆＃39;然后像往常一样滚动。当我的下一个section进入时我会再次将h1再次贴在顶部，依此类推。

的jQuery

$(document).ready(function(){
    $(window).scroll(function(){
        $('section h1').addClass('fixed');
    })
})

我也尝试过：

var section = $('section');
distance = section.offset().top,
$window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
       section.find('h1').addClass('fixed');
    }
});

Answer 1

你可以使用一些jQuery来做到这一点。

以下代码段计算每个部分到窗口顶部的偏移量。当某个部分点击窗口顶部时，标题<h1>的位置会更改为position:fixed;。

DEMO

jQuery的：

function fixTitle() {
    $('section.affix').each(function () {
        var $this = $(this);
        var offset = $this.offset().top-40;
        var scrollTop = $(window).scrollTop();

        if (scrollTop > offset) {
            $this.addClass('fixed');
        } else {
            $this.removeClass('fixed');
        }
    });
}

$(document).ready(function () {
    $(window).scroll(fixTitle);
});

CSS：

section {
    overflow:hidden;
    padding:0 20%;
    position:relative;
  text-align:justify;
}
section h1 {
    float:left;
    width:14%;
  padding-left:1.5%;
  line-height:40px;
    background:#fff;
    position:relative;
  z-index:1;
}
section .summary {
    float:right;
    width:70%;
}
.fixed h1:first-child {
    position:fixed;
    top:0;
}
h1:first-child:before{
  content:"";
  position:absolute;
  left:0;
  width:5%;
  height:100%;
  background-color:#4381B6;
  z-index:-1;


}
.fixed h1:first-child:before{
  width:100%;
  -webkit-transition:width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
}

Answer 2

您可以使用

在某些最新的浏览器中使用CSS3解决此问题

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 15px;
}

请参阅this demo（或不支持位置的浏览器中的this demo with a polyfill：本机粘贴）和相应的article以了解更多信息。我建议使用这种技术，因为它可以毫无问题地工作（即使在移动设备上），并且已经可以使用旧版浏览器的强大polyfill。

Answer 3

你可以使用像基金会的Magellan这样的东西：

http://foundation.zurb.com/docs/components/magellan.html

如果你想手动完成，你需要使用jQuery offset计算每个h1的偏移量，然后绑定到.scroll事件一个显示并粘贴正确元素的处理程序：

var $h1 = $("h1")

//Example: Offset top of the first h1
h1OffsetTop = $h1.eq(0).offset().top

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    //Do comparison to scrollTop to each h1, etc.
    //Then add fixed class to the correct h1 and remove it from all others
});

Answer 4

您可以使用Twitter Bootstrap Affix库，它是您所需要的独立实现。只需为其need提供数据属性：

<section>

    <h1 data-spy="affix" data-offset-top="60" data-offset-bottom="200">Title</h1>
    <div class="summary">
    ...

或者，如果内容高度未知，您可以计算偏移量底部：

$('h1').affix({
    offset: {
        top: 100
        , bottom: function () {
            return (this.bottom = $('.summary').offset().top + $('.summary').outerHeight(true))
        }
    }
})

请记住，JavaScript实现将优先于数据属性。

Answer 5

这是一个基于Stick div at top after scrolling的小型JavaScript / jQuery函数，可以满足您的需求：

function sticky()
{
    var window_top=$(window).scrollTop();
    var top_position=$('body').offset().top;
    var element_to_stick=$('h1');

    if (window_top > top_position) {
        element_to_stick.addClass('sticky').css('position', 'fixed');
    } else {
        element_to_stick.removeClass('sticky').css('position', 'relative');
    }
}
$(window).scroll(sticky);
sticky();

使用粘性 CSS类，您可以更改粘性元素。当然 css（'position'，'fixed | relative'）部分也可以直接放入CSS中。

当部分可见时，将标题固定到顶部

5 个答案:

DEMO