0

/ ------------------------------------------------- ---------------------------------- /編集：固定CSSポジショニングを使用したくありません。スクロールせずにビューポートの下部にありますが、上部に到達したときにフォローしたいと思います。/ ------------------------------------------------- ---------------------------------- /

MASSIVEサイドバーを使用してSqueezeページを作成しています。たくさんの推薦状や事実、写真などがあります。ただし、上部にボタンがあり、ユーザーがスクロールするときにページを下に移動したいと思います。難しいことではありませんか？

私はこのスクリプトを持っています-それがページの上部に当たると.followmeのドラッグを開始します。ただし、その下にあるすべてのdivも押し下げられました。JUST .followをターゲットにして、その下のdivに影響を与えないように指示できますか？

<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $(".followme").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $(".followme").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 100);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $(".followme").stop().animate({
                marginTop: newPosition
            });
        } else {
            $(".followme").stop().animate({
                marginTop: 0
            });
        };
    });
});

4

1 に答える 1

1

JS\jQueryをまったく必要としない簡単なオプションがあります。

.followme {
    position: fixed;
    height: 30px;
    width: 30px;
    background-color: #FF0000;
    top: 48%;
    left: 0;
}

これは、ページの他の要素に影響を与えることはなく、スクリプトもまったく必要ありません。たとえば、特定のスクロール％で表示する要素（followme）や、考えられるその他の双方向性が必要な場合は、より創造的に考える必要があります。しかし、問題が要素をスクロールに追従させることだけである場合は、上記が適切でクリーンな解決策になるはずです。

コード例：

http://jsfiddle.net/bhpgC/

于 2011-09-08T00:06:15.320 に答える