web-dev-qa-db-ja.com

別のdivを超えてスクロールした後、divをページの上部に固定しますか？

<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>

<style>
  body { margin: 0px; background-color: #e3e3e3; }
  #header { background-color: #cb5454; height: 140px; }
  #sticky { background-color: #546bcb; height: 70px; }
  #section { height: 1500px; }
  #footer { background-color: #cb5454; height: 140px; }
</style>

これが私のコードです： http://jsfiddle.net/uaqh018d/

#stickyを#headerを超えてスクロールした後、ページの上部に貼り付けたいです。 また、スタックするまで非表示にしたいです。そして、もちろん、＃headerまでスクロールしてから、再びunstick + hideします。

どうすればこれを達成できますか？

javascriptjqueryhtmlcssheader
13
John

画面の上部に固定する準備ができたら#stickyにクラスを追加し、「固定解除」する場合はそのクラスを削除することをお勧めします。その後、CSSでそのクラスを操作できます。

例えばクラスfixedの場合、CSSに次のように記述します。

#sticky {
    display: none;
    background-color: #546bcb;
    height: 70px;
}
#sticky.fixed {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
}

そして、jQueryは次のようになります。

$(window).scroll(function() {
    var distanceFromTop = $(this).scrollTop();
    if (distanceFromTop >= $('#header').height()) {
        $('#sticky').addClass('fixed');
    } else {
        $('#sticky').removeClass('fixed');
    }
});

これが更新された FIDDLE

また、jQueryのフェード効果やスライド効果もお勧めします（フィドルを参照）。

20
bowheart

position: fixedを使用して、jsでユーザーが次のようにスクロールしたことを検出できます。

$(document).scroll(function() {
  //detect when user scroll to top and set position to relative else sets position to fixed
  $("#sticky").css({
    "top": "0",
    "position": $(this).scrollTop() > 140 ? "fixed" : "relative"
  });
});
body {
  margin: 0px;
  background-color: #e3e3e3;
}
#header {
  background-color: #cb5454;
  height: 140px;
}
#sticky {
  background-color: #546bcb;
  height: 70px;
  width: 100%;
  position: fixed;
}
#section {
  height: 1500px;
}
#footer {
  background-color: #cb5454;
  height: 140px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>

参照

。scroll（）

5
Alex Char

私の場合、貼り付けたいdivは別のdivの内部にありました（つまり、ページに固定されていませんが、ページの横にある別の固定divにあります）。これは、Reactコンポーネント（sticky_adapter.js）を指定した場合のこの問題の解決に対する@bowhartの回答の私の適応です。

module.exports.makeItSticky = function(thisReactComponent, parentScrollNode = window) {
  const thisNode = $(ReactDOM.findDOMNode(thisReactComponent));
  const position = thisNode.position();

  // Uncomment for verbose logging
  //console.log("Initial position: " + UIUtils.stringify(position));

  const scrollContainer = $(parentScrollNode);
  scrollContainer.scroll(() => {
    const distanceFromTop = scrollContainer.scrollTop();
    // Uncomment for verbose logging
    //console.log("ScrollTop: " + distanceFromTop);

    if (distanceFromTop > position.top) {
      thisNode.addClass("stick-to-top");
    } else {
      thisNode.removeClass("stick-to-top");
    }
  });
};

ここで、Reactコンポーネントをスティッキーにするために、クラスに追加するだけです。

componentDidMount() {
  StickyAdapter.makeItSticky(this, ".some-other-div-which-is-the-container");
}

最後に、スティッキークラスのCSS：

.stick-to-top {
  display: block;
  position: sticky;
  top: 0;
  z-index: 10;
}
0
Ryan Shillington