滚动时固定侧栏

我正在尝试将脚本添加到我的页面，以便在用户到达底部时修复侧栏。滚动时固定侧栏

我试图将类添加到我的侧栏的容器通过执行脚本和下面的CSS来固定其位置：

脚本

function fixeSideBar() { 
    var myWindow = $(window), 
     mySideBar = $(".widget-area"); 

    myWindow.scroll (function() { 
      if (myWindow.scrollTop() < 130) { 
      mySideBar.removeClass("sticks"); 
     } else { 
      mySideBar.addClass("sticks"); 
     } 
    }); 
} 

$(function() { 
     fixeSideBar(); 
    });

CSS

.sticks { position：fixed; top：-50px; float：right; left：1000px; padding-top：62px; 宽度：37％; background-color：#fafafa; padding-right：40px; padding-left：40px; }

不过，我面临两个主要问题：

通过增加这个新的类，我失去了我的侧栏的整个格式（包括其在屏幕的右侧位置）。
整个格式只能在我的电脑上（具有特定的屏幕宽度和高度）正常工作。

我想什么，最终实现将是当用户到达其下（在任何类型的设备）以固定侧边栏，并确保我的侧边栏的格式保持不变。

来源

2015-07-06 Teddy

首先，而不是使用顶部和左侧，使用底部：50px和右侧：100px或适合设计的任何值，而不是硬编码左1000px它不适用于较小的设备 –

使用浏览器的开发人员工具看看它是否仍然拥有“widget-area”类。如果它确实存在，那么检查CSS（也来自浏览器的开发者工具）以查看是否t这里是新课程覆盖的任何属性 –

试试这个

myWindow.scroll (function() { 
     if (myWindow.scrollTop() <= mySideBar.offset().top +mySideBar.height()) { 
     mySideBar.removeClass("sticks"); 
    } else { 
     mySideBar.addClass("sticks"); 
    } 
});

如果你想，当达到该分区的底部，你在条件添加meSideBar.height（）被固定的侧边栏，如果你想补充工具栏是固定的，就像所示DIV删除它

来源

2015-07-06 03:55:04

滚动时固定侧栏

回答

相关问题