基本上我有一个包含两个div的div容器。当向下滚动时,div容器经过窗口时,它附着在屏幕顶部并跟随屏幕。然而,当我继续向下滚动时,容器div中的div与页脚重叠。
我似乎想不出如何阻止页脚重叠,所以我希望当div容器的底部到达页脚附近时,它会停止移动,但当向上滚动时,它仍然跟随屏幕。目前,它所做的就是在传递时跟随屏幕向下,并跟随屏幕返回到其原始位置。
以下是以下部分的JS:
function sticky_relocate_2() {
var window_top = $(window).scrollTop();
var div_top = $('.sticky-an
我有2列的布局。左边的列比侧边栏长得多。我希望侧边栏只有当它的底部到达浏览器窗口底部时才会粘住。这样,用户就可以继续向下滚动左列内容,而右边的侧边栏则继续滚动。我在这里看到了很多棘手的问题,但是这种特殊的情况仍然使我感到困惑。我也有一个贴在左栏的标题栏,我已经成功地坚持了。
下面是我在中所做工作的演示!
下面来看看我正在试用的js。
$(function(){
var headlineBarPos = $('.headlineBar').offset().top; // returns number
var sidebarHeight = $
我有一个页面布局,其中全宽图像在顶部,然后在右侧有文本内容。在左边,有一个小的滚动div,里面有社交链接。
它是这样的: (社交链接滚动,然后变得固定,然后从另一个div滚动)。
下面是一个示例,但没有下面拼图的最后一块:
function sticky_relocate() {
var window_top = jQuery(window).scrollTop();
var div_top = jQuery('#e-c-r-top').offset().top ;
if (window_top
我有一个导航栏,我想坚持到页面的顶部,因为用户向下滚动。如果有太多的链接放在视口中,我希望元素溢出,这样用户就可以在它里面滚动来单击链接,也可以停留在视口的底部,这样所有的链接都可以访问。 我可以使用position: sticky将元素粘贴到视口的顶部,然后使用getBoundingClientRect()根据当前位置约束它的max-height。如下所示: #element {
/* Stick the element to the top of the viewport as the user scrolls down */
position: sticky;
top: 0
我在Google App engine上有一个用python/django/html编写的网站。网站位于,这是一种博客,它展示了一些带着我制作的弓的人的图像。我已经在顶部实现了一个“粘性标题”,而我在帖子的第9个位置显示了广告。但是,当我滚动列表时,谷歌广告以某种方式迫使它们自己位于标题的顶部。这张图片在问题的底部。
这是什么原因造成的,有没有可能修复它?我想要的广告滚动像其他帖子,但它不应该显示,因为它是“超过”标题时,它在该位置。
粘性头部jquery代码:
$(function(){
// Check the initial Poistion of the Sticky Head
当用户滚动过某个点时,我尝试向元素中添加一个class,然后在元素底部传递页面上的另一个点时删除相同的class。
我已经完成了第一部分工作(当scrollTop大于另一个元素的顶部位置时添加类),但是我在进一步删除类时遇到了困难--我可以成功地删除类,但是当我的函数出现在滚动时,它会不断检查定位,这意味着功能有点混乱,每个滚动都添加/删除class。
请在下面找到我的JS和JSFiddle链接:
var top = jQuery(".lineTop").offset().top;
var lineTopTop = top + jQuery(".lineTop"
我有一个div,坚持在屏幕底部,并希望取消它一旦它击中页脚。我让它坚持,但一旦它滚动到脚,它不会取消。
var scrollTop = $(document).scrollTop();
var div = $('.floating-div');
var footer = $(document).outerHeight() - $('#footer').outerHeight() - div.outerHeight();
function stickyDiv() {
if (scrollTop < footer) {
div.