6

共有アイコンとソーシャルアイコンを含むバーがあります。バーは投稿タイトルの下に次のように配置されます。

<div class="post" id="post-<?php the_ID(); ?>">

            <div class="title">
                <h1><?php the_title(); ?></h1>
            </div>

            <div class="sharelinks">
                <ul>
                    <li><a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal">Tweet</a></li>
                    <li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-show-faces="false" data-font="arial"></div></li>
                    <li><g:plusone size="medium" href="<?php the_permalink(); ?>/"></g:plusone></li>
                    <li><a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo urlencode(sofa_image_src('full')); ?>&description=<?php echo urlencode(get_the_title($post->ID)); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a></li>
                    <li><su:badge layout="1"></su:badge></li>
                </ul>
            </div>
</div>

それが私のhtmlです。「sharelinks」のCSSは次のとおりです。

.sharelinks {
    padding: 10px 20px;
    background: #f1f1f1;
    box-shadow: 0 1px #fff inset, 0 -1px #fff inset;
    border-bottom: 1px solid #ddd;
    position: relative;
}

私が達成したいことは？ -ユーザーがスコープを超えてスクロールしたときにsharelinksdivの位置を変更し、常にページのTOP（固定位置）に配置し、ユーザーが元の場所にスクロールして戻ったときにデフォルトの位置に戻すようにします。アイデアは、ユーザーがスクロールしたときにバーを「超えて」スクロールしない限り、バーをその位置に表示する方法です。バーはページの上部に固定されて表示されます。

HEADERで完全に機能する同様のコードがありますが、この要素では同じコードが機能しません。ヘッダーがページの最上部にあるためだと思います。

私が求めているその効果をどのように実現するかについて、私は本当に助けやアイデアが必要です。

// fixed navigation
var yOffset = $("#header").offset().top;
$(window).scroll(function() {
    if ($(window).scrollTop() > yOffset) {
        $("#header").css({
            'top': 0,
            'position': 'fixed'
        });
    } else {
        $("#header").css({
            'top': yOffset + 'px',
            'position': 'absolute'
        });
    }
});
4

2 に答える 2

12

これが修正された解決策です。:)

スクロール位置を取得することから始まり、スクロールが特定の値（上から要素の開始までの距離）を通過するときに要素のCSSを固定に変更します。それ以外の場合は、要素のデフォルトのcssを元に戻します。

var sOffset = $(".sharelinks").offset().top;
var shareheight = $(".sharelinks").height() + 43;
$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > sOffset - shareheight) {
        $(".sharelinks").css({
            'top': '61px',
            'position': 'fixed'
        });
    } else {
        $(".sharelinks").css({
            'top': 'auto',
            'position': 'relative'
        });
    }
});
于 2012-06-12T19:38:18.440 に答える
5

それを作るために使用position:stickyします。

これが説明された記事です。

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

このデモを行う古い方法

スティッキーポジションデモ付き

于 2012-09-14T10:16:25.983 に答える