1

誰かが親切に助けてくれることを願っています。私は決してプログラマーではなく、通常とは少し異なるスティッキー div を作成する方法を学ぼうとしています。これは私が達成したいことです:

  • div #projectwrapper が画面を上にスクロールし、ウィンドウの上部から 150 ピクセルの位置にある場合、残りのページがスクロールしている間、そこにとどまる必要があります。
  • ページを下にスクロールすると、div が表示されたときにページ内の通常の場所に戻る必要があります。

私はデモと例を試してきましたが、ほぼ動作するようになりました。ただし、ウィンドウの最上部に移動した場合にのみアクティブになり、最上部に固執します。ただし、上から150pxでアクティブ化と貼り付けが必要です。

これは私がこれまでに持っているものです。

$(document).ready(function() {
$('#projectwrapper').waypoint(function(event, direction) {
}, {
    offset: 150
}).find('#projectdescription').waypoint(function(event, direction){
    $(this).parent().toggleClass('sticky', direction === "down");
    event.stopPropagation();
});
});
4

1 に答える 1

1

私はウェイポイントを使用していません。いくつかの簡単なjQueryを使用して行うことができます。

 var projectWrapperPosition = $('#projectwrapper').position().top; //div position
  $(window).scroll(function() { //when window scrolls
    if($(window).scrollTop() > (projectWrapperPosition - 150)) //check if position of the window is 150px or smaller than the position of specified div has
     $('#projectwrapper').addClass('change-position'); //.change-position position fixed the div
     else
      $('#projectwrapper').removeClass('change-position');

  });

css：

.change-position {
  top:150px;
  position:fixed;
  width:100%;
  background:red;
}

デモを確認してください：http： //jsbin.com/uxizab/2/（スクロールして効果を確認してください）

于 2012-12-23T11:34:42.293 に答える