jquery - JQuery スティッキー/フォロー サイドバーを使用していますが、ボックスのヘッダー画像がテキストと共に移動しませんか?

Question

前もって、ありがとう。

私はHEREのスティッキー サイドバー コードを使用しており、ボックスに画像ヘッダーを追加してスタイルをカスタマイズしていましたが、配置すると、ここで自分で確認できるテキストに従いません: thomas-dixon.com/joomla .

私が使用しているコードは次のとおりです。

[view-source:http://thomas-dixon.com/joomla/][3]

助けてくれてありがとう。

Answer 1

デモ: http://jsfiddle.net/enve/hjeBP/

jQueryコードを次のように置き換えます。

<script type="text/javascript">
$(function(){ // document ready
  
  if (!!$('#sidebar-left-content').length) { // make sure "#sidebar-left-content" element exists
  
  var el = $('#sidebar-left-wrap');
  var stickyTop = $('#sidebar-left-content').offset().top; // returns number
  var footerTop = $('#footer').offset().top; // returns number
  var stickyHeight = $('#sidebar-left-content').height();
  var limit = footerTop - stickyHeight - 20;
  
  $(window).scroll(function(){ // scroll event
                   
                   var windowTop = $(window).scrollTop(); // returns number
                   
                   if (stickyTop < windowTop){
                   el.css({ position: 'fixed', top: 0 });
                   }
                   else {
                   el.css('position','static');
                   }
                   
                   if (limit < windowTop) {
                   var diff = limit - windowTop;
                   el.css({top: diff});
                   }
                   
                   });
  
  }
  });</script>

動作デモ: http://jsfiddle.net/enve/hjeBP/