Question

我有多个包含内容的div，每个div都有一个标题。我想制作一个离开视口的最后一个标题是＆＃34;粘性＆＃34;或固定在视口的顶部。

我已经看到了一些不同的方法，但它们似乎都不适用于多个标题。

$('.content').scroll(function(){
    console.log('scrolling')
    $('.itemheader').each(function(){
    var top = $(this).offset().top;
    console.log(top);

     if(top<25){
        $(this).addClass('stick');
     }else{
        $(this).removeClass('stick');
     }
    })
 });

我认为可能存在冲突，因为每个标题具有相同的类名，并且没有唯一标识符，因此我的上述尝试并未正确运行。

Answer 1

http://jqueryfordesigners.com/iphone-like-sliding-headers/

这正是我所寻找的：

http://jqueryfordesigners.com/demo/header-slide.html

$(document).ready(function () {
// 1. grab a bunch of variables
var $container = $('#box');
var $headers = $container.find('h2');
var zIndex = 2;
var containerTop = $container.offset().top + parseInt($container.css('marginTop')) + parseInt($container.css('borderTopWidth'));
var $fakeHeader = $headers.filter(':first').clone();

// 2. absolute position on the h2, and fix the z-index so they increase
$headers.each(function () {
   // set position absolute, etc
   var $header = $(this), height = $header.outerHeight(), width = $header.outerWidth();

   zIndex += 2;

   $header.css({
       position: 'absolute',
       width: $header.width(),
       zIndex: zIndex
   });

   // create the white space
   var $spacer = $header.after('<div />').next();
   $spacer.css({
       height: height,
       width: width
   });
});

// 3. bind a scroll event and change the text of the take heading
$container.scroll(function () {
    $headers.each(function () {
        var $header = $(this);
        var top = $header.offset().top;

        if (top < containerTop) {
            $fakeHeader.text($header.text());
            $fakeHeader.css('zIndex', parseInt($header.css('zIndex'))+1);
        }
    });
});

// 4. initialisation
$container.wrap('<div class="box" />');
$fakeHeader.css({ zIndex: 1, position: 'absolute', width: $headers.filter(':first').width() });
$container.before($fakeHeader.text($headers.filter(':first').text()));

});

将最后滚动的标题粘贴到视口的顶部？

1 个答案: