粘性元素内的div与绝对位置滚动

我有div与position: absolute和overflow: auto。在这个div里面，我有一个div，它应该是粘性的，当我滚动时应该被修复（top: 0, bottom: 0, overflow: auto）。粘性元素内的div与绝对位置滚动

我可以修复这个div，但是我不能将它恢复到原来的位置，因为当这个div被修复时我无法附加滚动事件。

$('.right').scroll(function() { 
    if ($('.scroll').offset().top <= 0) { 
     $('.scroll').css({ 
      'position': 'fixed', 
      'top': 0, 
      'left': '20px', 
      'right': '0', 
      'overflow': 'auto' 
     }) 
    } 
})

请检查我的jsfiddle更多信息 - JSFIDDLE

谢谢。

来源

2015-05-11 AndryName

下面是我该怎么做。这并没有固定它，但它具有相同的外观。一旦scrollTop等于或大于固定内容的顶部“应该”的位置，那么我们将顶部绝对地设置为scrollTop的顶部，如果一旦scrollTop达到固定内容过去的位置时向上滚动，它将会再次放下。

$(document).ready(function() { 
    oldOffset = $('.scroll').offset().top; 
    $('.right').scroll(function() { 
    if ($('.right').scrollTop() > oldOffset) { 
     $('.scroll').css({ 
     'position': 'absolute', 
     'top': $('.right').scrollTop(), 
     'left': '20px', 
     'right': '0', 
     'overflow': 'auto' 
     }); 
    } 
    }); 
});

（Demo）

来源

2015-05-12 00:06:45

谢谢。我试过这个。但是如果'.right'具有滚动功能，它会跳转，并且会打破一切。 – AndryName

我的意思是'.scroll'绝对位置改变'.right'的高度。 – AndryName

你说得对。嗯，我做了同样的事情。谢谢。我明白了， – AndryName

设置外div来

position: relative;

设置里面的div

position: absolute; 
top: 15px; 
right: 15px;

这将使内部div的右上角处父容器内的指定位置。当设置绝对位置时，相对于第一个父容器设置图像，我相信该位置的位置被定义为默认值以外的任何值。如果没有指定位置的DOM元素，则绝对元素将相对于视口进行定位。

来源

2015-05-12 00:24:24 plushyObject

我无法将外部div设置为'position：relative'。 – AndryName

它不一定是相对的，它可以是任何东西，但它必须被定义为某种东西。相对效果很好，因为它将元素相对于通常放置的位置相对放置，但如果您将其设置为相对，并且不要让它移动，则可以将其用于您想要利用此位置的情况：绝对的把戏。你跟着？我承认这有点棘手。 – plushyObject

这是非常奇怪的任务要完成:)

但无论如何，存在这个问题：当你设置你内心div到position: fixed你定位这个div您div.right上述

，这是防止滚动火灾事件。

所以你需要的是将pointer-events: none设置为div.scroll以允许你的div.right监听滚动事件没有任何问题。

但是当你做，你将面临另一个问题 - 当您设置div.scroll到position: fixed它会自动失去其div.right和div.right跳跃内的地方，滚动的顶部。为了防止您需要创建div.scroll的克隆并将其初始设置为height至0，并在您的内部元素已修复时设置为auto。

注意pointer-events: none - 禁用包括文本选择在内的所有鼠标事件。

有代码：

$(document).ready(function() { 
    var cnt = $('.right'); 
    var scrollEl = $('.scroll'); 
    var scrollClone = scrollEl.clone().addClass('clone'); 
    scrollEl.before(scrollClone); 
    cnt.scroll(function() { 
     var expression = scrollClone.offset().top <= 0; 
     scrollEl.toggleClass('stick', expression); 
     scrollClone.toggleClass('stick-clone', expression); 
    }) 
})

CSS

.scroll { 
    background: yellow; 
    pointer-events: none; 
    overflow: hidden; /* Remove top offset from h1*/ 
} 
.scroll.stick { 
    position: fixed; 
    left: 20px; 
    right: 0; 
    top: 0; 
} 
.scroll.clone { 
    height: 0; 
    overflow: hidden; 
} 
.scroll.clone.stick-clone { 
    height: auto; 
}

JSFiddle

来源

2015-05-17 12:13:58

你可以尝试以下方法例如：

首先，不是将css添加为内联样式，而是创建一个可以从.scroll元素中添加和删除的css类。

CSS

.fixed-top { 
    position:fixed; 
    top:0; 
    left:20px; 
    right:20px; 
}

与将在JavaScript中使用，让您的.scroll div的原始高度的轨道另一个DIV包装你.scroll元素。

HTML

<div class="scroll-wrapper"> 
    <div class="scroll"></div> 
</div>

最后，当施加在第一次固定位置的scrollTop的值存储在变量中。然后，您可以使用该值确定何时从.scroll div中删除固定样式。同时设置.scroll-wrapper元素的高度等于您的.scroll元素的高度，以确保内容是可滚动的。

的Javascript

var startScrollTop = 0; 
    $('.right').scroll(function() { 
     var $scroll = $('.scroll'); 
     if ($scroll.offset().top <= 0 && $('.right').scrollTop() > startScrollTop) { 
      if (startScrollTop === 0) { 
       startScrollTop = $('.right').scrollTop(); 
      } 
      $('.scroll-wrapper').css("height", $('.scroll').height() + 300); 
      $scroll.addClass("fixed-top"); 
     } else { 
      $scroll.removeClass("fixed-top"); 
     } 
    })

看看这个小提琴。 http://jsfiddle.net/a924dcge/25/

希望有帮助！

来源

2015-05-18 08:46:13

粘性元素内的div与绝对位置滚动

回答

相关问题