javascript - 非同期 - レスポンシブ ページ内リンク ずれる




セクションが表示されているときにタイトルを上に固定 (4)

FoundationのMagellanのようなものを使うことができます。

http://foundation.zurb.com/docs/components/magellan.html

手作業でやりたい場合は、 jQuery offsetを使用し、次に正しい要素を表示して固定するハンドラを.scrollイベントにバインドすることによって、各h1のオフセットを計算する必要があります。

var $h1 = $("h1")

//Example: Offset top of the first h1
h1OffsetTop = $h1.eq(0).offset().top

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    //Do comparison to scrollTop to each h1, etc.
    //Then add fixed class to the correct h1 and remove it from all others
});

私のユーザーがスクロールしたときよりもエフェクトを作成しようとしていると、私のh1がウィンドウの一番上に表示されます。 親divがh1を超えてスクロールすると、「解放」され、通常どおり再びスクロールします。 次のsection入ったら、その次のh1をもう一度一番上に貼り付けたいと思います。

Fiddle

jQuery

$(document).ready(function(){
    $(window).scroll(function(){
        $('section h1').addClass('fixed');
    })
})

私も試してみました:

var section = $('section');
distance = section.offset().top,
$window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
       section.find('h1').addClass('fixed');
    }
});

スクロールした後の一番上のStick divをベースにしたJavaScript / jQueryの小さな関数は、次のとおりです。

function sticky()
{
    var window_top=$(window).scrollTop();
    var top_position=$('body').offset().top;
    var element_to_stick=$('h1');

    if (window_top > top_position) {
        element_to_stick.addClass('sticky').css('position', 'fixed');
    } else {
        element_to_stick.removeClass('sticky').css('position', 'relative');
    }
}
$(window).scroll(sticky);
sticky();

スティッキ CSSクラスを使用すると、スティッキ要素を変更できます。 もちろん、 css( 'position'、 'fixed | relative')部分はCSSに直接配置することもできます。


ちょっとしたjQueryを使ってこれを行うことができます。

次のスニペットは、ウィンドウの上部に対する各セクションのオフセットを計算します。 セクションがウィンドウの一番上に<h1> 、タイトルの<h1>位置がposition:fixed;変わりposition:fixed;

DEMO

jQuery:

function fixTitle() {
    $('section.affix').each(function () {
        var $this = $(this);
        var offset = $this.offset().top-40;
        var scrollTop = $(window).scrollTop();

        if (scrollTop > offset) {
            $this.addClass('fixed');
        } else {
            $this.removeClass('fixed');
        }
    });
}

$(document).ready(function () {
    $(window).scroll(fixTitle);
});

CSS:

section {
    overflow:hidden;
    padding:0 20%;
    position:relative;
  text-align:justify;
}
section h1 {
    float:left;
    width:14%;
  padding-left:1.5%;
  line-height:40px;
    background:#fff;
    position:relative;
  z-index:1;
}
section .summary {
    float:right;
    width:70%;
}
.fixed h1:first-child {
    position:fixed;
    top:0;
}
h1:first-child:before{
  content:"";
  position:absolute;
  left:0;
  width:5%;
  height:100%;
  background-color:#4381B6;
  z-index:-1;


}
.fixed h1:first-child:before{
  width:100%;
  -webkit-transition:width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
}

最近のブラウザのいくつかでCSS3を使ってこれを解決することができます。

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 15px;
}

このデモ (または位置をサポートしていないブラウザでのポリフィルを含むこのデモ :ネイティブにスティッキー)および詳細articleは対応するarticlearticleしてください。 私はそれが問題なく(モバイル機器でさえ)働くのでこのテクニックを使うことを提案するでしょう、そしてより古いブラウザのための堅牢なpolyfillはすでに利用可能です。





html