zoukankan      html  css  js  c++  java
  • jQuery固定浮动侧边栏(jQuery fixed Sidebar)

    需要在页面引用jQuery库.

    可以在这里看demo.

    HTML代码:

    <div id="header">header</div>
    <div id="sidebarWrap">
    <div id="sidebar">Sidebar</div>
    </div>
    <div id="main">Main</div>
    <div id="footer">footer</div>

    CSS代码:

    body {
        margin: 10px auto;
        font-family: sans-serif;
         500px;
    }
    div {
        border-radius: 5px;
        box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
        border: 1px solid #ccc;
        padding: 5px;
    }
    #sidebarWrap {
        height: 400px;
         210px;
        float: right;
        position: relative;
        box-shadow: none;
        border: none;
        margin: 0;
        padding: 0;
    }
    #main {
         270px;
        height: 4000px;
    }
    #footer {
        clear: both;
        margin: 10px 0;
    }
    #sidebar {
         200px;
        height: 300px;
        position: absolute;
    }
    #header {
        height: 200px;
        margin-bottom: 10px;
    }
    #sidebar.fixed {
        position: fixed;
        top: 0;
    }
    #footer { height: 600px; }

    JavaScript代码:

    $(function() {
        var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
        var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));
     
        var maxY = footTop - $('#sidebar').outerHeight();
     
        $(window).scroll(function(evt) {
            var y = $(this).scrollTop();
            if (y > top) {
                if (y < maxY) {
                    $('#sidebar').addClass('fixed').removeAttr('style');
                } else {
                    $('#sidebar').removeClass('fixed').css({
                        position: 'absolute',
                        top: (maxY - top) + 'px'
                    });
                }
            } else {
                $('#sidebar').removeClass('fixed');
            }
        });
    });
  • 相关阅读:
    algorithm
    jstl
    jsp
    cookie
    变量和方法调用过程中会出现的参数传递
    http请求
    weblogic 的安全域问题
    web service
    行业充电
    客户端生成web service
  • 原文地址:https://www.cnblogs.com/piuba/p/3334371.html
Copyright © 2011-2022 走看看