スクロールバーに続いてブログサイドバーモジュールをスライドさせる固定効果の実装方法(js jquery等)_javascriptスキル

ページのコンテンツが非常に長い場合、ウィンドウが下の位置にスライドすると、サイドバーの列が短く見える場合があり、コンテンツを横に表示する機会が失われます。 Sina、NetEase、CSDN などの多くのニュースおよび情報 Web サイトは、サイドバーの右下隅にある固定の小さなポップアップ ウィンドウを使用して、より多くのコンテンツ表示方法を提供しますが、これはブログや Web2 には適していません。 .0スタイルのウェブサイト。

現在、Renren などの多くの独立したブログや Web サイトでは、サイドバー モジュールがスクロール バーとともにスライドし、その位置が固定される効果が使用されています。つまり、ページが非常に長い場合、サイドカラムのコンテンツがスクロール バーに従うように設定します。この効果は、コメントが多く長いコンテンツが含まれる Web サイトに適しています。 Zhiwen Studio では、同様の機能の実装方法をいくつか調査し、参考のために抜粋しました。

参考 1. ページビューを増やす特殊効果: サイドバーがスクロール バーに続く

出典: Lu Songsong のブログ
http://lusongsong.com/reed/453.html

コードは次のとおりです:

CSS 部分:

コードをコピー コードは次のとおりです:

/*サイドバー以下* /
#box{float:left;position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0 ;z -index:250;}

注: 各 Web サイトのサイドバーの幅は異なります。Web ページの幅に応じて div1 の幅を調整できます。私の場合は、このコードを CSS ファイルに追加します。

JS 部分:

JavaScript コード

コードをコピー コードは次のとおりです:

//サイドバー フォロー
(function(){
var oDiv=document.getElementById("float");
var H=0,iE6;
var Y=oDiv;
while(Y){H =Y .offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
window.onscroll=function()
{
var s = document.body.scrolltop || document.documentelement.scrolltop;}}
jsファイルに入れます。たとえば、util.jsファイルに配置します。

Web ページのコード部分:

コードをコピー

コードは次のとおりです:

< ;div id= "box">

ここに Web サイトのコードとタグを記述します

注: 記事リストとアフィリエイト広告をここに配置できます。つまり、クリックスルー率を高めるための良い方法です。 Z-blog ユーザーは、このコードを single.html のサイドバーに追加できます。

特別なヒント: このコードは任意の CMS システムで試行できますが、他のブラウザでは問題なく実装できます。同時に、サイドバーの残りの部分は静的ファイルを使用して呼び出す必要があります。列を呼び出すとコードが重複しますが、アフィリエイト広告を呼び出すことは問題ありません。


参考2. スクロールバーでサイドバーのスクロール効果を追加する(例)

出典: Free Wind ブログ (http://loosky.net/?p=2028)

手順は次のとおりです:

1. サイドバーの各モジュールにいくつかのクラス フラグを追加します。 サイドバーにこれらのクラス フラグが既に存在している場合は、それらを追加せずにそのまま使用します。 ID を追加することでも効果を得ることができますが、w3c 標準では同じページに複数の同一 ID を表示することが許可されていないため、クラス スタイルを使用するのが最善です。

2. Web サイトのページ上の任意の js ファイルに次のコードを追加します。

JavaScript コード

コードをコピー

コードは次のとおりです:

var rollStart = $('.Statistics'), //このブロックまでスクロールするとフォローを開始します
rollOut = $('.WidgetMeta,.Statistics') //rollStart ブロックを非表示にした後
rollSet = $('.RRPosts,.TagsCloud') //rollStart の前にフォローアップ ブロックを追加します

rollStart.before('

');
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();
objWindow.scroll(function) () {
if (objWindow.scrollTop() > offset.top){
if(rollBox.html(null)){
rollSet.clone().prependTo(' .rollbox');
}
rollOut.fadeOut();
rollBox.show().stop().animate({top:0,paddingTop:10},400);
rollOut.fadeIn();
rollBox.hide().stop().animate({top:0},400);



注: スクロール領域のコンテンツは長すぎてはなりません。長すぎると、無限ドロップダウンが発生します。

参考 3. JQUERY SCROLL FOLLOW

これはプラグインであり、追加手順は非常に簡単です。圧縮パッケージをダウンロードして Web サイトのディレクトリに解凍し、手順に従います。 詳細については、以下を参照してください:

http://kitchen.net-perspective.com/open-source/scroll-follow/

ページの例:
http://kitchen.net-perspective.com/sf-example-1.html

http://kitchen.net-perspective.com/sf-example-2.html

http://kitchen.net-perspective.com/sf-example-3.html
http://kitchen.net-perspective.com/sf-example-4.html

サイドバー モジュールはウィンドウとともにスライドします (サンプル ページ)
出典: http://www.mb-wx.com/common/msay.js

このコードは Muben Wuxin のブログ (pjblog) から引用しています。原理は非常に単純です。つまり、ウィンドウが指定されたモジュール位置に到達すると、上部からの距離を判断し、調整を開始します。このコードは、Zhiwen Studio ブログのサイドバーで使用されています。

JavaScript コード

コードをコピー コードは次のとおりです:/ /Sidebar モジュールはウィンドウとともにスライドします。

jQuery(document).ready(function($) {

$(function() { (window),
offset = $sidebar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
} );
}
});
})