javascript - 下にスクロールしたときに一番上に続く私のウェブサイトに div を作成する方法はありますか?

Question

このdivに同じことをさせたい:

#panel {
    margin: auto;
    border-bottom: 1px solid rgba(0,0,0,.6);
    border-top: 0;
    box-shadow: 0 1px rgba(0,0,0,.1),
    1px 0 rgba(0,0,0,.1),
    -1px 0 rgba(0,0,0,.1),
    0 -1px rgb(255,255,255) inset,
    0 1px 2px rgba(0,0,0,.2) inset,
    1px 0 rgb(255,255,255) inset,
    -1px 0 rgb(255,255,255) inset;
    background: #E8E8E8;    
    width: 75%;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    color: rgba(0,0,0,.7);
    text-shadow: 0 1px white;
    padding: 2px 0px 2px 8px;
    margin-top: -149px;
    text-align: left;
    font-size: 11px;
}

私のウェブサイト: http://www.bobbaxtrade.com

ありがとう：）

score 2 · Accepted Answer

ここでjsFiddleを作成しました：http：//jsfiddle.net/cBk7q/

したがって、ウィンドウの上部でdivを静的にするために、cssルールにクラスを追加する必要があります。

.fixed {
    position: fixed;
    top: 0;
    left: 0;
}

次に、jQuery関数を追加してスクロールイベントをバインドし、目的の位置に到達したときに固定クラスを追加します。

<script type="text/javascript">
    var $mydiv = $("#mydiv"),
        origTop = $("#mydiv").position().top;

    $(window).scroll(function(e) {
        if( document.body.scrollTop > origTop) {
            console.log($mydiv.hasClass('fixed'));
            $mydiv.addClass("fixed");
        }
        else {
            console.log('c ' + (document.body.scrollTop > origTop));
            $mydiv.removeClass("fixed");
        }
    });
</script>

score 1 · Accepted Answer

Bootstrap の Web サイトでは、この機能の使用方法について説明しています。

ブートストラップを使用している場合は、CSS クラスnavbar-fixed-topを使用してこの動作を取得できます。

<div id="panel" class="navbar navbar-fixed-top">
  ...
</div>

スクロールした後にのみナビゲーションバーが固定されるという効果が必要な場合は、navbar-fixed-topJavaScript ( LessCSSから取得) を使用してクラスを動的に追加する必要があります。

HTML があるとします。

<!-- some content -->
<div id ="panel">
  …
</div>
<!-- enough other content to make the document scroll -->

そしていくつかのCSS

.navbar-fixed-top {
  position: fixed;
  top: 0;
  left: 0;
}

次に、次の JS が要求された動作を提供します。

var docked = false;
var menu = document.getElementById('panel');
var init = menu.offsetTop;

function scrollTop() {
  return document.body.scrollTop || document.documentElement.scrollTop;
}

window.onscroll = function () {
  if (!docked && (menu.offsetTop - scrollTop() < 0)) {
    menu.style.top = 0;
    menu.className = 'navbar-fixed-top';
    docked = true;
  } else if (docked && scrollTop() <= init) {
    menu.style.top = init + 'px';
    menu.className = menu.className.replace('navbar-fixed-top', '');
    docked = false;
  }
};

この例は、Firefox、Chrome、Opera、および Safari で機能します。Internet Explorer には回避策が必要です。

score 0 · Accepted Answer

jQuery を使用している場合は、https://github.com/bigspotteddog/ScrollToFixedを試してください。基本的な使用方法は次のとおりです。

$(document).ready(function() {
    $('#panel').scrollToFixed();
});

... ただし、オプションについてはリンクを参照してください (たとえば、ユーザーが下にスクロールしたときにフッターパネルを許可するなど)。

javascript - 下にスクロールしたときに一番上に続く私のウェブサイトに div を作成する方法はありますか?

3 に答える 3

Related