0

私は2列のレイアウトを持っています。左の列はサイドバーよりもずっと長いです。サイドバーの下部がブラウザウィンドウの下部に達したときにのみサイドバーを固定したい. したがって、ユーザーは、右側のサイドバーが固定されている間、左側の列のコンテンツを下にスクロールし続けることができます。ここで多くの厄介な質問を見てきましたが、この特定の状況は依然として私を悩ませています. また、左の列に固執する見出しバーがあり、固執することに成功しました。

これは私がjsfiddleで行ったことのデモです!

ここで、私が試している js を簡単に見てみましょう。

    $(function(){
       var headlineBarPos = $('.headlineBar').offset().top; // returns number
       var sidebarHeight = $('.sticky-sidebar-wrap').height();
       var sidebarTop = $('.sticky-sidebar-wrap').offset().top;
       var windowHeight = $(window).height();

       var totalHeight = sidebarHeight + sidebarTop;

    $(window).scroll(function(){ // scroll event 

          var windowTop = $(window).scrollTop(); // returns number

          // fixing the headline bar    
          if (headlineBarPos < windowTop) {
              $('.headlineBar').addClass('sticky').css('top', '0');
          }
          else {
              $('.headlineBar').removeClass('sticky').removeAttr('style');
          }

        if(sidebarHeight < windowTop) {
            $('.sticky-sidebar-wrap').addClass('sticky').css('top', '0');
        } else {
           $('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style');
        }

        console.log(windowTop);

    });


    console.log(headlineBarPos);
    console.log(sidebarHeight);
    console.log(sidebarTop);

    });
4

2 に答える 2

1

サイドバーの下部がビューに入ったときに、それが正しいことを願っています。

サイドバーの下部 (サイドバー内) に別の div を作成しました。それが見えてくると、くっつきます。

http://jsfiddle.net/Z9RJW/10/

<div class="moduleController"></div> //inside the sidebar

そしてjsで

$(function () {


var headlineBarPos = $('.headlineBar').offset().top; // returns number
var moduleControllerPos = $('.moduleController').offset().top; // returns number    
var sidebarHeight = $('.sticky-sidebar-wrap').height();
var sidebarTop = $('.sticky-sidebar-wrap').offset().top;
var windowHeight = $(window).height();

var totalHeight = sidebarHeight + sidebarTop;

$(window).scroll(function () { // scroll event 

    var windowTop = $(window).scrollTop(); // returns number

    // fixing the headline bar    
    if (headlineBarPos < windowTop) {
        $('.headlineBar').addClass('sticky').css('top', '0');
    } else {
        $('.headlineBar').removeClass('sticky').removeAttr('style');
    }

    if (moduleControllerPos < windowTop + windowHeight) {
        $('.sticky-sidebar-wrap').addClass('sticky').css('top', '0');
    } else {
$('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style');        }






    console.log(windowTop);

});


console.log(headlineBarPos);
console.log(sidebarHeight);
console.log(sidebarTop);

});

お役に立てば幸いです。

于 2013-09-26T12:42:03.483 に答える