Question

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

Answer 1

以下是如何完成此操作的简单示例，我们会听取window onscroll事件，如果$(window).scrollTop()超过某个阈值，我们会添加.fixed类到我们的侧边栏，否则删除它。 .fixed类设置position:fixed以便它坚持下去。查看小提琴，了解完整的工作示例。

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>

Answer 2

$(document).ready(function(){
   var my_scrol_position = 220;
   $("#my_div_name").scrollTop(my_scrol_position);
});

确保您的div css与overflow:auto

。{

Answer 3

本教程可以帮助您。 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)
            });
    });

});

工作demo例如2

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

如何使div固定在特定的滚动级别

3 个答案: