使用 JQuery/Javascript 滚动两个 div

Question

• 包装器 - 溢出隐藏
  • 第一部分：侧边栏
  • 第二部分：主要内容

第二部分将有一个正常的滚动。 Div One 我希望没有可见的滚动，但是当您滚动 Div One 时，它​​会滚动 Div Two。

当 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;
}

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;
}