2

我想将特定的侧 div 固定在特定的滚动级别，一个完美的例子是堆栈 oveflow 提问页面右侧的“如何格式化”栏。只需尝试提出问题即可查看。这怎么可能 ？使用 css 或 jquery。

4

3 回答 3

1

这是一个如何完成此操作的简单示例，我们监听window onscroll事件，如果$(window).scrollTop()高于某个阈值，我们将.fixed类添加到侧边栏，否则将其删除。.fixed班级设置position:fixed使其坚持下去。查看 fiddle 以获得完整的工作示例。

jsFiddle

JS

$(window).scroll(function () {
    var threshold = 100;
    if ($(window).scrollTop() >= 100)
        $('#sidebar').addClass('fixed');
    else
        $('#sidebar').removeClass('fixed');
});

CSS

#sidebar {
    position:absolute;
    width:80px;
    background-color:#0F0;
    height:200px;
}

#sidebar.fixed {
    position:fixed;
    top:0;
}

HTML

<header>
    I'm the header
</header>
<div id="container">
    <aside id="sidebar">
        I'm a sidebar
    </aside>
    <section id="content">
        ...
    </section>
</div>
于 2013-03-31T06:49:55.530 回答
1 
$(document).ready(function(){
   var my_scrol_position = 220;
   $("#my_div_name").scrollTop(my_scrol_position);
});

确保你div有cssoverflow:auto

于 2013-03-31T07:12:23.967 回答
0

本教程可以帮助您。http://css-tricks.com/scrollfollow-sidebar/

或者

这个

html

<div id="header">HEADER</div>
<div id="content">
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
</div>
<div id="footer">FOOTER</div>

js

$(function() {
    var $sidebar = $("#right"), 
        $window = $(window),
        rightOffset = $sidebar.offset(),
        rightDelta = $("#footer").offset().top - $("#header").offset().top - $("#header").outerHeight() - $("#right").outerHeight(),
        topPadding = 15;

    $window.scroll(function() {
            $sidebar.stop().animate({
                marginTop: Math.max(Math.min($window.scrollTop() - rightOffset.top + topPadding, rightDelta), 0)
            });
    });

});

示例 2 的工作演示

你可以根据你的需要选择希望这可以帮助你..

于 2013-03-31T08:25:52.460 回答