5

ブラウザウィンドウに固定されているため、固定位置は私のユースケースでは機能しません。テキストが画面の右側から外れてテキストが表示されない状態になる可能性があります。とにかく、絶対配置を使用してから、javascript で「トップ」を調整しようとしました。Firefox と Chrome では問題なく動作しますが、Safari ではスクロールするとコンテンツが揺れます。

http://jsfiddle.net/Z8UFE/4/

<div class="fixed sticky" data-offset-top="50"><p>fixed</p></div> 

$(document).ready(function() {
    var documentHeight = $(document).height();
    $(document).scroll(function() {
      var scrollTop = $(window).scrollTop();

      $(".sticky").offset(function() {
        $this = $(this);
        var offsetTop = $this.data("offset-top");

        if (scrollTop < 0) {
          scrollTop = 0;
        }

        var newTop = offsetTop + scrollTop;
        if (newTop < offsetTop) {
          newTop = offsetTop;
        }

        // Prevents document from infinitely expanding.
        var maxTop = documentHeight - $this.height();
        if (newTop > maxTop) {
          newTop = maxTop
        }

        // Prevents a bit of jitter since the current offset can be
        // not precisely the initial offset. 338 Vs. 338.12931923
        var currentTop = $this.offset().top;
        if ( Math.abs(currentTop - newTop) >= 1 ) {
          return { top: newTop }
        } else {
          return {}
        }
      });
    });
})
4

1 に答える 1

0

あなたが達成しようとしていることを理解していると思います。

要素の固定位置を維持し、javascript/jquery を使用して水平方向に再配置すると、スムーズな垂直スクロールを維持し、水平方向の配置も維持できます。

$(function() {
    var $sticky = $('.sticky');
    var target  = 800;

    $(document).scroll(function() {
        var left = $(window).scrollLeft();
        var adj  = target - left;
        $sticky.css({left: adj});
    });
});

これは、 scrollTop() に対応する水平方向のscrollLeft()を使用します。

http://jsfiddle.net/Z8UFE/18/

于 2014-11-01T22:54:39.647 に答える