1

かなりの検索を行った後、自分のニーズに合った答えが見つからないようです。風刺的なブログプロジェクトに取り組んでいる間(ここにあります) スティッキー サイドバーを右側のサイドバーで機能させることができ、計画どおり上部でうまく停止しました。以前は、左側のサイドバーが同じことを行うようにモデル化されていました。私が求めているのは、同様の設定を使用して、左側のサイドバーのページのさらに下、または右側に 2 番目の要素を配置し、最初の要素に従ってビューをスクロールアウトし、同様に上部で停止する、柔軟性を可能にするいくつかのパラメーターです。コンテンツをさらに下に置くと、一番上に止まります。これは不可能であるか、私のスキルセットが不十分で、自分が何をしているのかわからない (後者の可能性が非常に高い) ため、ガイダンスに永遠にお世話になります。以下に、使用されている既存のコーディングを示します (リンクされたページにある問題を示すためにそのままにしておきますが、コンテキストでは明らかに正しくありません)。このバリエーションを求めているのは私だけだとは想像できません。解決策が提供された場合は、感謝の気持ちを込めて適切にスクリプトに記載されます。私の CSS の知識は初歩的なものよりもわずかに優れていますが、詳細を教えていただければ幸いです。さらなるポジショニングが必要だと思います。必要に応じて対応してくれる寛大な魂に、追加の洞察を提供できることをうれしく思います。現在、これが適用される要素は正確です (つまり、それぞれ「.sidebar-right-1」と「HTML7」)…</p>

#sidebar-right-1.sticky {
position: fixed;
width: 310px;
top: 5px
}
#HTML7.sticky {
position: fixed;
width: 310px;
left: 50%;
margin-left: -690px;
top:5px

そして、以下の対応するスクリプト

<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){ 
var offset = 0;
var sticky = false;
var top = $(window).scrollTop();
if ($("aside").offset().top < top) {
$("#sidebar-right-1, #HTML7").addClass("sticky");
sticky = true;
} else {
$("#sidebar-right-1, #HTML7").removeClass("sticky");
}
});
//]]>
</script>

乾杯、ここでのエチケットの見落としを親切に許してください.

4

0 に答える 0