到达浏览器的顶部边缘时,粘性的左侧边栏缩小并且右侧边栏扩展

时间:2018-07-17 13:21:40

标签: html css

早上好,我需要一些编码帮助,我只是在博客上添加了一个简单的粘性博客代码。它工作得很好,但是只有一件事需要修复。当侧边栏到达浏览器顶部时,左侧会稍微收缩,右侧会在滚动条旁边扩展。我应该怎么做才能使两个侧边栏保持相同直到边缘。下面是我在博客博客中使用的代码。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(function() {
    var ks_widget_top = $('#widget Id').offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop(); 

        if (ks_current_top > ks_widget_top) { 
          $('#widget Id').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
        } else {
            $('#widget Id').css({ 'position': 'relative' }); 
        }   
    };
    ks_sticky_widgets();
      $(window).scroll(function() {
         ks_sticky_widgets();
    });
});</script>

1 个答案:

答案 0 :(得分:0)

我浏览了您博客​​的代码。似乎使用#sidebar-right-1

而不是更改.main-inner.column-left-outer的位置
<script type="text/javascript"> 
$(function() {
    var ks_widget_top = $('#widget Id').offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop(); 

        if (ks_current_top > ks_widget_top) { 
          $('.main-inner.column-left-outer').css({ 'position': 'fixed', 'top':0, 'right': 'auto', 'z-index':999999 });
        } else {
            $('.main-inner.column-left-outer').css({ 'position': 'relative' }); 
        }   
    };
    ks_sticky_widgets();
      $(window).scroll(function() {
         ks_sticky_widgets();
    });
});</script>

请让我知道这是否有效