停止页脚的固定位置
我正在寻找一个解决scheme来解决页面页脚的固定对象的stream行问题。
我基本上在屏幕的左下angular有一个固定的“共享”框，我不希望它滚动页脚，所以我需要它停止页脚上方约10px 。
我在这里也看到了其他的问题。 我能find的最接近/最简单的演示是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 ，它没有固定的高度，如果这有什么区别。
如果有人可以帮助我创build一个简单的jQuery解决scheme，我非常感谢！
现场演示
首先，每次滚动页面时检查其偏移量
$(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>
祝你好运 ：）
我刚刚在一个正在处理的网站上解决了这个问题，并且认为我会分享这个问题，希望它能帮助到某个人。
我的解决scheme需要从页脚到页面顶部的距离 – 如果用户滚动得比这更远，它会将边栏拉回到负边距。
$(window).scroll(function () { // distance from top of footer to top of document footertotop = ($('#footer').position().top); // distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding) scrolltop = $(document).scrollTop()+570; // difference between the two difference = scrolltop-footertotop; // if user has scrolled further than footer, // pull sidebar up using a negative margin if (scrolltop > footertotop) { $('#cart').css('margin-top', 0-difference); } else { $('#cart').css('margin-top', 0); } });
我最近遇到了同样的问题，在这里也贴出了我的解决scheme： 使用位置时防止元素显示在页脚之上：fixed
您可以使用jQuery的元素position属性来实现一个解决scheme，在默认值（ divs static ）， 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'); } });
这是@Sang解决scheme，但没有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>
这对我有用 –
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的function是从一个答案复制到另一个类似的问题在stackoverflow，但它不完全为我工作。 所以我将它修改为这些函数，如下所示。 我认为你的divs的位置等属性将取决于divs的结构，他们的父母和兄弟姐妹是谁。
当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 }); }; };
