固定邊欄與相對高度和流體絕對過渡

我期待實現一個固定的側邊欄，將滾動到div的底部，然後將更改爲絕對定位的元素，以阻止它繼續下去的頁面。固定邊欄與相對高度和流體絕對過渡

當您向上滾動側邊欄返回到固定位置。側邊欄需要繼承與其旁邊的列相同的高度，以便固定邊欄看起來不奇怪。調整屏幕大小以匹配列時，邊欄的大小需要更改。

到目前爲止，我已經能夠：

作出這樣的繼承柱的高度，並將其應用到div的代碼。
使重新計算窗口高度的代碼重新調整大小。
請從固定改變定位的代碼 - >絕對的，反之亦然

我所做的代碼計算DIV應該多遠滾動但是這是我碰到的問題：

我需要它來更新它相對於窗口大小側邊欄滾動的距離（我認爲這意味着只是在調整大小im內再次運行腳本不太確定）
它應該滾動多遠的計算是相對於用戶瀏覽器的高度，因此不是克羅爾到正確的點，當15" 屏幕相比，23"

我找上使計算應該在調整大小滾動火的距離，以及爲了創建一個無縫的腳本一些幫助經驗。

以及一些幫助找出使用正確的公式，以便它在瀏覽器窗口的所有實例中正確顯示。

的Javascript

$(document).ready(function() { 

    var offsetHeight = document.getElementById('main-column').offsetHeight; 
    document.getElementById('main-sidebar').style.height = offsetHeight+'px'; 

    function updateHeight() { 
     var offsetHeight = document.getElementById('main-column').offsetHeight; 
     document.getElementById('main-sidebar').style.height = offsetHeight+'px'; 
    } 

    $(window).resize(updateHeight).trigger('resize') 

    $(window).bind('scroll', function() { 
     if($(window).scrollTop() >= 40 + $('#main-sidebar').offset().top + offsetHeight - window.innerHeight) { 
      $('.sidebar-wrap').addClass('scroll'); 
     } else { 
      $('.sidebar-wrap').removeClass('scroll'); 
     } 
    }); 
});

HTML

<div class="main-page"> 
    <div class="row-2col-left"> 
     <div class="column" id="main-column"> 
      <?php 
       if (function_exists('yoast_breadcrumb')) { 
        yoast_breadcrumb(' 
        <p id="breadcrumbs">','</p> 
        '); 
       } 
      ?> 
      <?php if (have_posts()) : 
       while (have_posts()) : 
        the_post(); 
        the_content(); 
       endwhile; 
      endif; ?> 
     </div> 
     <div class="sidebar" id="main-sidebar"> 
      <div class="sidebar-wrap" id="sidebar-wrap"> 
       <?php get_sidebar('sidebar-1'); ?> 
       <p>test</p> 
      </div> 
     </div> 
    </div> 
</div>

SCSS/CSS

.wrap { 

    .main-page { 


     .row-2col-left { 

      .sidebar { 
       position: relative; 
       width: 30%; 

       .sidebar-wrap { 
        position: fixed; 
       } 

       .sidebar-wrap.scroll { 
        position: absolute; 
        bottom: 0; 
       } 
      } 

      .column { 
       width: 70%; 
      } 
     } 
    } 
}

來源

2017-07-13 Daniel Vickers

我通過編輯用於計算的滾動距離的代碼修正此：

$(window).bind('scroll', function() { 
    if($(window).scrollTop() >= offsetHeight - 100) { 
     $('.sidebar-wrap').addClass('scroll'); 
    } else { 
     $('.sidebar-wrap').removeClass('scroll'); 
    } 
});

因爲我們已經知道offsetHeight與邊欄高度相等，所以我在減去數值之前弄得一團糟，直到流暢。如果您要使用此代碼，我相信您必須更改- 100的值才能使其正常工作。

編輯：我把它全部變成了1個功能，並啓用了所有更新窗口大小調整，這也只在調整大小完成時觸發。

<script type="text/javascript"> 

$(document).ready(function() { 

    function updateScroll() { 

     var offsetHeight = document.getElementById('main-column').offsetHeight; 
     document.getElementById('main-sidebar').style.height = offsetHeight+'px'; 

     $(window).bind('scroll', function() { 
      if($(window).scrollTop() >= offsetHeight - 100) { 
       $('.sidebar-wrap').addClass('scroll'); 
      } else { 
       $('.sidebar-wrap').removeClass('scroll'); 
      } 
     }); 
    } 

     $(window).resize(updateScroll).trigger('resize') 
    }); 
</script>

來源

2017-07-13 11:12:09

固定邊欄與相對高度和流體絕對過渡

回答

相關問題