0

このサイトには、ページの上部から約 700 ピクセルの 100% 幅の div があります。ユーザーがページを下にスクロールしてメニューに到達すると、固定に変わり、ユーザーが上にスクロールして戻るまでページの上部にとどまります。http://jsbin.com/omanut/2で見つけたこのコードを実装しました。

    <script type="text/javascript">

    var fixit = document.querySelector('.topmenu');
    var origOffsetY = fixit.offsetTop;

    function onScroll(e) {
    window.scrollY >= origOffsetY ? fixit.classList.add('topfix') :
                              fixit.classList.remove('topfix');
    }

    document.addEventListener('scroll', onScroll);

    </script>

「topmenu」は、メニュー バーの div 要素に使用した独自のクラスです。「topfix」は、一部の html < style > タグ内で定義されたクラスです。

    <style>

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

    </style>

ご覧のとおり、このコードは問題の div のクラスとして「topfix」を追加します。したがって、HTML は < div class="topmenu" > から < div class="topmenu topfix" > に変更する必要があります。Chrome と Firefox では美しく機能しますが、IE では機能しません。私はプログラミングの初心者ですが、IE で動作するイベント リスナーを追加するには、何かが欠けている可能性があると思います。私は助けに感謝します。

--いくつかの回答の後、スクリプトにいくつかの変更を加えました。Chrome/FF ではクールですが、IE ではまだ動作しません。

<script type="text/javascript">
var fixit = document.getElementsByTagName('div')[3];
var origOffsetY = fixit.offsetTop;

function onTopScroll(e) {
window.scrollY >= origOffsetY ? fixit.classList.add('topfix') :
                          fixit.classList.remove('topfix');
}
document.addEventListener('scroll', onTopScroll);
document.attachEvent('onscroll', onTopScroll);

</script>

attachEvent の構文がよくわかりません。さらに助けていただければ幸いです。

4

2 に答える 2

1

お使いの IE のバージョンは何ですか。document.querySelector()すべての IE でサポートされているわけではありません。特定のクラスを使用getElementsByTagNameして一致させてから、自分のことを行うことができます。

于 2013-10-03T07:00:20.697 に答える