Question

我正在尝试创建一个与bento.io上看到的完全相同的固定左菜单，以便我可以使用角度来创建滚动间谍和导航，但由于某种原因，它根本不起作用。我的左侧固定菜单从窗口消失，当我开始添加固定到它时，右侧部分占据整个屏幕

以下是我目前所做工作的链接on JSBin

更新：我正在寻找一个仅限CSS的解决方案，因为我正在使用angularjs

Answer 1

<强> 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

Answer 2

使用

<强> CSS ：

leftmenu-class{

position:fixed;
top:100px //your preferred height from top;
}

just a simple demo //只是告诉工作

这是updated demo

在@Gold Pearl提出建议之后再次Re-updated

添加 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');

        }
    });

});

Answer 3

这是一个非常类似的演示，我刚刚掀起。希望它可以帮助你。 Jsfiddle Demo

您可以点击＆＃34;编辑＆＃34;右上角的按钮可以查看我的完整HTML，CSS和JS。 http://jsfiddle.net/ojm39Ljz/8/

<强> CSS

最初菜单栏thingy与页面是静态的，但稍后我们会希望它被修复，所以我们创建另一个具有固定位置的类。

.floating-bar {
    position: static;
    float: left;
    width: 40%;
    padding-left: 20px;
}
.is-floating {
    position: fixed;
    top: 0;
}

Javascript（jQuery）

然后我们使用jQuery来检查用户是否已滚动。一旦用户滚过我们设置的偏移量（标题的高度），该函数就会将我们之前创建的类is-floating添加到菜单栏中。如果用户在偏移量上方向上滚动，则该函数会从菜单栏中删除is-floating类。

$(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");
        }
    }
});

希望这有帮助，祝你的项目好运！

固定左菜单，右侧可滚动div不起作用

3 个答案: