Question

包装 - 隐藏溢出
- Div One：补充工具栏
- 第二部分：主要内容

Div Two将有一个正常的滚动。 Div One我希望没有可见的滚动但是当你滚动Div One时它会滚动Div Div。

当Div One的高度击中底部时，它将不再滚动，反之亦然，以便向上滚动。

这将导致侧边栏始终可见。在您提出要求之前，我已经尝试了所有定位类型以使其工作，从而导致许多尝试失败。

我的现场演示可以在这里看到：http://rafflebananza.com/admin/newadmin.html#

注意我试图简化JSFiddle，但我的数学似乎并没有相同。请建议我是否应将我的所有页面分到那里，或者为将来需要相同帮助的访问者提供什么。

概述

滚动包装器会将侧边栏滚动到仅指向x（x是侧边栏高度）然后停止但会继续允许滚动内容。滚动备份反之亦然。

那里有一半...

var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop,
    position = document.body.scrollTop;

function scrollD() {
    var scroll = document.body.scrollTop;

    if (scroll > position) {
        // Scrolling Down Functions
    } else {
        // Scrolling Up Functions
    }
    position = scroll;
}

4 个答案:

答案 0 :(得分：1)

答案 1 :(得分：1)

答案 2 :(得分：0)

答案 3 :(得分：0)

Answer 1

更新了符合OP要求的答案。

我以当前状态下载了您的网站，并对您的代码进行了以下更改：

var scrollY = 0;
$(window).scroll(function() {
    var sideNav = $('.SideNav');                // The side navigation
    var wScrollY = $(this).scrollTop();         // Current scroll position of Window
    var navHeight = sideNav.height();           // Height of the Navigation
    var StageHeight = $(window).height() - 46;  // The display space

    if(sideNav.height() > StageHeight) {                    // Do the following if the side navigation is higher than the display space 
        var spaceLeft = sideNav.height() - StageHeight;     // spaceLeft -> how many pixel left before fixing navigation when scrolling

        if(scrollY < wScrollY) {                                // Scroll direction is down
            if (wScrollY >= spaceLeft)                          // If scroll top > space left -> fixate navigation at the bottom, otherwise scroll with the content
                sideNav.css({top:46-spaceLeft+wScrollY});

            if (wScrollY <= 46)                                 // Set top strict to 46. Sometimes there is white space left, caused by the scroll event.       
                sideNav.css({top:46});
        } else {                                                // Scroll direction is up
            var sideNavTop;
            if (sideNav.offset().top < 0) {
                sideNavTop = Math.pow(sideNav.offset().top);    // if top is negative, make it positive for comparison
            } else {
                sideNavTop = sideNav.offset().top;
            }

            if (sideNavTop > (46+wScrollY))                     // Fixate the header if top of navigation appears
                sideNav.css({top:46+wScrollY});
        }
    } else {
        sideNav.css({top:46+wScrollY});                     // Fixate always
    }

    scrollY = wScrollY;
});

这将让您滚动侧面导航直到结束。然后注意。如果向上滚动，它仍将被固定，直到您到达导航必须滚动回其原始位置的点。

您可以在此处查看已修改的版本：http://pastebin.com/Zkx4pSKe

只需将原始代码复制到空白的html页面并试用即可。

它有点乱，也许不是最好的解决方案，但它确实有效。

Answer 2

好的，你走了：

var $sidebar = $('.sidebar'),
    $window = $(window),
    previousScroll = 0;
$window.on('scroll', function (e) {
    if ($window.scrollTop() - previousScroll > 0) {
        $sidebar.css({
            'top': Math.max($window.scrollTop() + $window.height() - $sidebar.outerHeight(true), parseInt($sidebar.css('top'))) + 'px'
        });
    } else {
        $sidebar.css({
            'top': Math.min($window.scrollTop(), parseInt($sidebar.css('top'))) + 'px'
        });
    }
    previousScroll = $window.scrollTop();
});

http://jsfiddle.net/7nwzcpqk/1/

Answer 3

我可能错误地误解了您想要的结果，但您可以看看这是否适合您：

.SideNav {
   position: fixed; // you currently have this as position:absolute;
}

Answer 4

您既不需要包装元素也不需要jQuery。我假设您正在使用包装器，因为您希望将顶部条放在那里。我认为通过使用简单的三个div可以有更好的方法。

顶栏必须为fixed（始终可见）且全宽。
侧栏也必须是fixed（始终可见），顶栏高度的上边距。
内容只需要左边的填充（侧边栏的宽度）和顶部填充（顶部条的高度）。

以下是示例代码（http://jsfiddle.net/zckfwL4p/）：

<强> HTML

<div id="top_bar"></div>
<div id="side_bar">links here</div>
<div id="content"></div>

<强> CSS

body {
    margin:0px;
    padding:0px;
}

#side_bar {
    width:50px;
    position: fixed;
    left:0px;
    top:20px;
    background-color:blue;
}

#top_bar {
    position:fixed;
    height:20px;
    left:0px;
    right:0px;
    background-color:red;
}

#content {
    position:relative;
    padding-left:55px;
    padding-top:25px;
}

使用JQuery / Javascript滚动两个Div

概述

那里有一半...

4 个答案: