2

私はjqueryを学んでおり、addClass関数にこだわっています。スクロール中に、サイドバー div を固定位置に変更するクラスを追加しています。フローから外され、右側のコンテンツ (サイドバーと右側のコンテンツの両方がfloat:left設定されています) が代わりに配置されます。でも、それは避けたい。右側のコンテンツをそのままにして、サイドバーをスクロールしたいと思います。html と css は次のとおりです。

依存関係

<script src="assets/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css"></link>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"></link>

Jクエリ

$(window).scroll(function(){
    var a=$('.sidebar-inner');
    var p=a.offset().top;
    var q=$(window).scrollTop();
    var r=$('.sidebar-inner').parent().offset().top;
    if(p-q<40){
        a.addClass("fixed-sidebar");
    }
    else{ 
        if(p-r<20){
            a.removeClass("fixed-sidebar");
        }
    }
});

CSS

html, body {
    background-color:rgb(229,229,229);
    height:100%;
    margin:0;
    padding:0;
}
.strip {
    min-height:200px;
}
.large-strip {
    min-height:300px;
}
.fixed-sidebar {
    position:fixed;
    top:20px;
}
.sidebar {
    float:left;
    width:270px;
    margin-left:-20px;
    opacity:1.0;
}
.sidebar-inner {
    margin-top:20px;
    width:256px;
}
.sidebar-inner ul {
    list-style:none outside none  border:1px solid black;
}
.sidebar-inner ul li {
    padding:0px 10px;
    border:1px solid;
    line-height:20px;
}
.main {
    margin-top:20px;
    margin-left:10px;
    padding:10px;
    width:200px;
    float:left;
}
.div1 {
    background-color:white;
    height:auto !important;
    min-height: 300%;
    width:auto;
    /*margin:0px auto -40px;*/
    border:1px solid;
}
.div1 .wide {
    display:block;
    border:1px solid black;
}
.div1 .div1_1 {
    width:50%;
    background-color:#fff;
    display:inline-block;
}
.div1 .div1_2 {
    display:inline-block;
    width:50%;
}
.footer {
    min-height:40px;
    border:1px solid black;
}

体

<body>
    <div class="div1">
        <div class="div1_1">
            This is div 1_1
        </div><!--
        --><div class="div1_2">
            This div 1_2
        </div>
        <div class="wide strip">
        </div>
        <div class="wide large-strip">
            <div class="container">
                <div class="row">
                    <div class=" sidebar">
                        <div class="sidebar-inner">
                            <ul>
                                <li>Item 1</li>
                                <li>Item 2</li>
                                <li>Item 3</li>
                                <li>Item 4</li>
                                <li>Item 5</li>
                                <li>Item 6</li>
                            </ul>
                        </div>
                    </div>
                    <div class="main">
                        <div class="content">
                            This is content
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="test">

        </p>
    </div>
    <div class="footer">
        This is footer
    </div>
</body>

サイドバーのdivをスクロールすると、スクロールバーでスクロールダウンしますが、これが発生している間、「これはコンテンツです」を含むdivが代わりに表示されるので、避けたいと思います。これを解決するために div に属性を追加できますか? ここで些細なことを見落としているかもしれません。しかし、私はそれを見つけることができません。助けてくれてありがとう。

JSfiddle - http://jsfiddle.net/nAwEz/

4

3 に答える 3

1

これは、スクロール位置に基づいて何かを変更するために使用するものです。

$(function(){
    $(window).scroll(function() { 
        if ($(this).scrollTop() > 150) { 
            a.addClass("fixed-sidebar"); 
        } 
        else {     
            a.removeClass("fixed-sidebar"); 
        }  
    });
});
于 2013-08-02T04:44:44.590 に答える
1

このフィドルを試してください

http://jsfiddle.net/yTwZz/2

$(window).scroll(function () {
    var a = $('.sidebar-inner');
    var p = a.offset().top;
    var q = $(window).scrollTop();
    var r = $('.sidebar-inner').parent().offset().top;
    console.log(p - q);
    console.log(p - r);
    if (p - q < 40) {
        a.addClass("fixed-sidebar");
        $('#hidden-nav-content').show();
    } else {
        if (p - r < 20) {
            a.removeClass("fixed-sidebar");
            $('#hidden-nav-content').hide();
        }
    }

});

HTML

<div class=" sidebar">
    <div id="hidden-nav-content" style="display:none;float:left;"></div>
    <div class="sidebar-inner">
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
           </ul>
    </div>
</div>

CSS

#hidden-nav-content,.sidebar-inner {
    margin-top:20px;
    width:256px;
}
于 2013-08-02T05:37:33.763 に答える