修正了右可滚动div不能工作的左菜单
修正了右可滚动div不能工作的左菜单
提问于 2014-12-17 05:57:00
我正在尝试创建一个固定的左侧菜单，就像在bento.io上看到的那样，这样我就可以使用角度创建一个滚动、间谍和导航，但是由于某种原因，它根本不起作用。当我开始添加固定菜单时，左边的固定菜单会从窗口中消失，右边的部分会占据整个屏幕。
下面是我到目前为止所做的论JSBin的链接
更新:我正在寻找CSS的唯一解决方案，因为我使用的是angularjs。
回答 3
Stack Overflow用户
发布于 2014-12-17 06:29:50
JS
$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc > 500) {
$(".course-menu").addClass("fixed-menu")
} else {
$(".course-menu").removeClass("fixed-menu")
}
});CSS
.fixed-menu
{
position: fixed;
top:80px;
}依赖关系JQuery
Stack Overflow用户
发布于 2014-12-17 06:33:14
使用
CSS
leftmenu-class{
position:fixed;
top:100px //your preferred height from top;
}只是一个简单的演示 //只是为了告诉工作人员
这是更新演示
“金珍珠”建议后，重新更新再问一遍
添加js
$(function () {
$(window).scroll(function () {
//After scrolling 100px from the top...
if ($(window).scrollTop() >= 500) {
$('.left').css('position', 'fixed');
$('.left').css('top', '0px');
//Otherwise remove inline styles and thereby revert to original stying
} else {
$('.left').css('position', 'absolute');
$('.left').css('top', '500px');
}
});
});Stack Overflow用户
发布于 2014-12-17 08:04:51
这是一个非常类似的演示，我刚刚做了一个演示。希望它能帮到你。杰斯德尔·德莫
您可以单击右上角的“编辑”按钮查看我的完整HTML、CSS和JS。http://jsfiddle.net/ojm39Ljz/8/
CSS
最初菜单栏对页面是静态的，但是稍后我们希望它是固定的，所以我们创建了另一个具有固定位置的类。
.floating-bar {
position: static;
float: left;
width: 40%;
padding-left: 20px;
}
.is-floating {
position: fixed;
top: 0;
}Javascript (jQuery)
然后我们使用jQuery来检查用户是否滚动过。一旦用户滚动过我们设置的偏移量(标题的高度)，函数就会添加前面创建的类为浮动到菜单栏中的内容。如果用户回滚到偏移量上方，则函数将从菜单栏中移除浮点类。
$(document).ready(function () {
//Set offset to the height of header in px
var offset = 500;
//On scroll, it calls the function floatingMenu()
floatingMenu();
$(window).scroll(function () {
//alert("checking menu");
floatingMenu();
});
//If distance from top of window is greater than the offset, it adds the class is-floating to the floating-bar
//If distance is less than the offset, it removes the is-floating class
function floatingMenu() {
if (($(window).scrollTop() > offset) && !($("#floating-bar").hasClass('is-floating'))) {
//alert("adding class");
$("#floating-bar").addClass('is-floating');
} else if (($(window).scrollTop() < offset) && ($("#floating-bar").hasClass('is-floating'))) {
//alert("removing class");
$("#floating-bar").removeClass("is-floating");
}
}
});希望这能帮上忙，祝你的项目好运！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27519213
复制相关文章
相似问题
腾讯云开发者
