17

理想的には純粋なCSSで、絶対配置された要素の位置を制限するための最良のアプローチは何ですか?

次のことは不可能であることはわかっていますが、探しているものは次のようになると思います。

.stickyElement{
   bottom-max:auto;      
   bottom-min:0px;
   top-max: auto;
   top-min: 100px;
 }

これにより、要素は、それを含む配置された要素の上から 100px 以上の位置に移動できます。

これの例 (および私の最初の) 使用例は、ページの一部としてスクロールするが、ビューポートの上部に到達するとスクロールを停止するメニューです。(スティッキー メニュー?) このページでその例を見ることができます: http://spektrummedia.com/startups

Javascript を使用しないとこれは不可能だと思いますが、公開したいと思いました。

4

5 に答える 5

5

JavaScript を使用せずにすべての主要なブラウザーでこれを構築する方法がないため、jQuery を使用して独自のソリューションを作成しました。

sticky-top-menu に割り当てposition:relativeます。スクロールしてブラウザ ウィンドウの上部に到達すると、位置がに変更されます。positon:fixed

また、sticky-top-menu top:0を指定して、ブラウザー ウィンドウの上部に固定されるようにします。

ここに、実際に動作するJSFiddle Exampleがあります。

HTML

<header>I'm the Header</header>
<div class="sticky-top-menu">
  <nav>
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
  </nav>
</div>
<div class="content">
  <p>Some content...</p>
</div>

jQuery

$(window).scroll(function () {
    var headerTop = $("header").offset().top + $("header").outerHeight();

    if ($(window).scrollTop() > headerTop) {
        //when the header reaches the top of the window change position to fixed
        $(".sticky-top-menu").css("position", "fixed");
    } else {
        //put position back to relative
        $(".sticky-top-menu").css("position", "relative");
    }
});

CSS

.sticky-top-menu {
    position:relative;
    top: 0px;
    width: 100%;
}
于 2013-04-24T07:56:35.317 に答える
3

body 0X 0Y と browser-window 0X 0Y の間の距離を定義するメディア クエリ式により、ページがスクロールされた後に要素をスティッキーにすることができます。

私の知る限り、そのような式は提案されておらず、どのブラウザーでもサポートされていませんが、ページが頭を越えてスクロールされた後に固定されるメニューバーなどの固定要素を使用せずに動的に構成できるようにするのは便利な式です。 JavaScriptの。

.this element {
  position: absolute;
  top: 200px;
}

@media (max-scroll: 200px 0) {
  .this.element {
    position:fixed;
    top: 0;
  }
}
于 2014-03-15T21:23:12.330 に答える
0

私はこの投稿が古いことを知っており、少し遅れているかもしれませんが、これを行う方法をまだ疑問に思っている人にはclamp()、CSS でメソッドを確認することをお勧めします。次のようなことができます。

top: clamp(30px, 10vw, 50px);

これにより、最上位の最小値が 30px、理想値が 10vw、最大値が 50px に設定されます。

于 2021-11-04T20:52:00.497 に答える