我正在寻找解决在页面页脚停止固定对象的流行问题的解决方案。
我基本上在屏幕的左下角有一个固定的“共享”框，我不希望它滚动页脚，所以我需要它停止在页脚上方的10px。
我在这里看到了其他问题以及其他问题。我能找到的最接近/最简单的演示是http://jsfiddle.net/bryanjamesross/VtPcm/，但我无法让它与我的情况一起工作。
这是共享框的html：
<div id="social-float">
<div class="sf-twitter">
...
</div>
<div class="sf-facebook">
...
</div>
<div class="sf-plusone">
...
</div>
</div>
......和CSS：
#social-float{
position: fixed;
bottom: 10px;
left: 10px;
width: 55px;
padding: 10px 5px;
text-align: center;
background-color: #fff;
border: 5px solid #ccd0d5;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: none;
}
页脚是#footer，它没有固定的高度，如果这有任何区别。
如果有人可以帮助我为此创建一个简单的jQuery解决方案，我会非常感激！
首先，每次滚动页面时检查其偏移量
$(document).scroll(function() {
checkOffset();
});
如果它在页脚之前被击倒在10px以下，则使其位置绝对。
function checkOffset() {
if($('#social-float').offset().top + $('#social-float').height()
>= $('#footer').offset().top - 10)
$('#social-float').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#social-float').css('position', 'fixed'); // restore when you scroll up
}
请注意，#social-float的父母应该是页脚的兄弟
<div class="social-float-parent">
<div id="social-float">
something...
</div>
</div>
<div id="footer">
</div>
祝好运 ：）
我刚刚在我正在研究的网站上解决了这个问题，并且认为我会分享它，希望它可以帮助某人。
我的解决方案是从页脚到页面顶部的距离 - 如果用户滚动得比这更远，它会以负边距拉回侧边栏。
$(window).scroll(() => {
// Distance from top of document to top of footer.
topOfFooter = $('#footer').position().top;
// Distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding).
scrollDistanceFromTopOfDoc = $(document).scrollTop() + 570;
// Difference between the two.
scrollDistanceFromTopOfFooter = scrollDistanceFromTopOfDoc - topOfFooter;
// If user has scrolled further than footer,
// pull sidebar up using a negative margin.
if (scrollDistanceFromTopOfDoc > topOfFooter) {
$('#cart').css('margin-top', 0 - scrollDistanceFromTopOfFooter);
} else {
$('#cart').css('margin-top', 0);
}
});
这是@Sang解决方案，但没有Jquery。
var socialFloat = document.querySelector('#social-float');
var footer = document.querySelector('#footer');
function checkOffset() {
function getRectTop(el){
var rect = el.getBoundingClientRect();
return rect.top;
}
if((getRectTop(socialFloat) + document.body.scrollTop) + socialFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 10)
socialFloat.style.position = 'absolute';
if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
socialFloat.style.position = 'fixed'; // restore when you scroll up
socialFloat.innerHTML = document.body.scrollTop + window.innerHeight;
}
document.addEventListener("scroll", function(){
checkOffset();
});div.social-float-parent { width: 100%; height: 1000px; background: #f8f8f8; position: relative; }
div#social-float { width: 200px; position: fixed; bottom: 10px; background: #777; }
div#footer { width: 100%; height: 200px; background: #eee; }<div class="social-float-parent">
<div id="social-float">
float...
</div>
</div>
<div id="footer">
</div>我最近遇到了同样的问题，也在这里发布了我的解决方案：Preventing element from displaying on top of footer when using position:fixed
您可以使用jQuery利用元素的position属性实现解决方案，在static的默认值（divs），fixed和absolute之间切换。您还需要一个容器元素作为固定元素。最后，为了防止固定元素越过页脚，该容器元素不能是页脚的父元素。
javascript部分涉及计算固定元素与文档顶部之间的像素距离，并将其与滚动条相对于窗口对象的当前垂直位置进行比较（即，隐藏在可见区域之上的像素数量）每次用户滚动页面时页面）。当向下滚动时，固定元素即将消失，我们将其位置更改为固定并粘贴在页面顶部。
当我们滚动到底部时，这会导致固定元素越过页脚，特别是如果浏览器窗口很小。因此，我们将从文档顶部计算页脚的像素距离，并将其与固定元素的高度加上滚动条的垂直位置进行比较：当固定元素即将越过页脚时，我们将将其位置更改为绝对位置并粘贴在底部，仅在页脚上方。
这是一个通用的例子。
HTML结构：
<div id="content">
<div id="leftcolumn">
<div class="fixed-element">
This is fixed
</div>
</div>
<div id="rightcolumn">Main content here</div>
<div id="footer"> The footer </div>
</div>
CSS：
#leftcolumn {
position: relative;
}
.fixed-element {
width: 180px;
}
.fixed-element.fixed {
position: fixed;
top: 20px;
}
.fixed-element.bottom {
position: absolute;
bottom: 356px; /* Height of the footer element, plus some extra pixels if needed */
}
JS：
// Position of fixed element from top of the document
var fixedElementOffset = $('.fixed-element').offset().top;
// Position of footer element from top of the document.
// You can add extra distance from the bottom if needed,
// must match with the bottom property in CSS
var footerOffset = $('#footer').offset().top - 36;
var fixedElementHeight = $('.fixed-element').height();
// Check every time the user scrolls
$(window).scroll(function (event) {
// Y position of the vertical scrollbar
var y = $(this).scrollTop();
if ( y >= fixedElementOffset && ( y + fixedElementHeight ) < footerOffset ) {
$('.fixed-element').addClass('fixed');
$('.fixed-element').removeClass('bottom');
}
else if ( y >= fixedElementOffset && ( y + fixedElementHeight ) >= footerOffset ) {
$('.fixed-element').removeClass('fixed');
$('.fixed-element').addClass('bottom');
}
else {
$('.fixed-element').removeClass('fixed bottom');
}
});
这对我有用 -
HTML -
<div id="sideNote" class="col-sm-3" style="float:right;">
</div>
<div class="footer-wrap">
<div id="footer-div">
</div>
</div>
CSS -
#sideNote{right:0; margin-top:10px; position:fixed; bottom:0; margin-bottom:5px;}
#footer-div{margin:0 auto; text-align:center; min-height:300px; margin-top:100px; padding:100px 50px;}
JQuery -
function isVisible(elment) {
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elment).offset().top;
return y <= (vpH + st);
}
function setSideNotePos(){
$(window).scroll(function() {
if (isVisible($('.footer-wrap'))) {
$('#sideNote').css('position','absolute');
$('#sideNote').css('top',$('.footer-wrap').offset().top - $('#sideNote').outerHeight() - 100);
} else {
$('#sideNote').css('position','fixed');
$('#sideNote').css('top','auto');
}
});
}
现在调用这个函数 -
$(document).ready(function() {
setSideNotePos();
});
PS - Jquery函数从stackoverflow上的另一个类似问题的答案复制，但它并没有完全适用于我。所以我将它修改为这些函数，如这里所示。我认为你的div的位置等属性将取决于div的结构，他们的父母和兄弟姐妹是谁。
当sideNote和footer-wraps都是直接兄弟姐妹时，上述功能有效。
我去修改@ user1097431的答案：
function menuPosition(){
// distance from top of footer to top of document
var footertotop = ($('.footer').position().top);
// distance user has scrolled from top, adjusted to take in height of bar (42 pixels inc. padding)
var scrolltop = $(document).scrollTop() + window.innerHeight;
// difference between the two
var difference = scrolltop-footertotop;
// if user has scrolled further than footer,
// pull sidebar up using a negative margin
if (scrolltop > footertotop) {
$('#categories-wrapper').css({
'bottom' : difference
});
}else{
$('#categories-wrapper').css({
'bottom' : 0
});
};
};
$(window).scroll(() => {
const footerToTop = $('.your-footer').position().top;
const scrollTop = $(document).scrollTop() + $(window).height();
const difference = scrollTop - footerToTop;
const bottomValue = scrollTop > footerToTop ? difference : 0;
$('.your-fixed-element').css('bottom', bottomValue);
});
你现在可以使用了
#myObject{
position:sticky;
}
希望这可以帮助..
一个纯粹的CSS解决方案
<div id="outer-container">
<div id="scrollable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in vulputate turpis. Curabitur a consectetur libero. Nulla ac velit nibh, ac lacinia nulla. In sed urna sit amet mauris vulputate viverra et et eros. Pellentesque laoreet est et neque euismod a bibendum velit laoreet. Nam gravida lectus nec purus porttitor porta. Vivamus tempor tempus auctor. Nam quis porttitor ligula. Vestibulum rutrum fermentum ligula eget luctus. Sed convallis iaculis lorem non adipiscing. Sed in egestas lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dictum, lacus quis venenatis ultricies, turpis lorem bibendum dui, quis bibendum lacus ante commodo urna. Fusce ut sem mi, nec molestie tortor. Mauris eu leo diam. Nullam adipiscing, tortor eleifend pellentesque gravida, erat tellus vulputate orci, quis accumsan orci ipsum sed justo. Proin massa massa, pellentesque non tristique non, tristique vel dui. Vestibulum at metus at neque malesuada porta et vitae lectus.
</div>
<button id="social-float">The button</button>
</div>
<div>
Footer
</div>
</div>
和css在这里
#outer-container {
position: relative;
}
#scrollable {
height: 100px;
overflow-y: auto;
}
#social-float {
position: absolute;
bottom: 0px;
}