1

私は非常に軽い wp テーマを構築しています。サイドバーにはウィジェットがほとんどなく、2 ページの長さしかありません。ここで、ユーザーが下にスクロールしてウィジェットが見えなくなったときに、残りのサイドバーを利用したいと考えています。これは、特に記事が非常に長い場合に最適です。

jqueryを使ったフローティング要素が一般的です。私が言ったように、これは非常に軽いテーマであるはずです。jQueryは非常に重いです。特定のページの長さで要素を表示するために、JavaScriptのみを使用して、表示および非表示にすることはできますか?

注: このテーマはレスポンシブです。

【追記】問題解決！ありがとうございます。

jQuery 用に 100kb 以上の帯域幅を節約しました。

他の人への参照として、ここに新しいスクリプトがあります。

<script defer type="text/javascript">var width = window.innerWidth || document.documentElement.clientWidth;
//Trigger the script only on browser width above 1150px. Recommended on responsive websites
if (width > 1150){ function testScroll(ev){
//Will set the position to FIXED with TOP=80px when user scrolls 850px below. 
if(window.pageYOffset>850){document.getElementById("targetID").style.position = "fixed";document.getElementById("targetID").style.top = "80px";} 
//Will set the position to ABSOLUTE with TOP=AUTO when user scrolls to top just above 850px line
else {document.getElementById("targetID").style.position = "absolute";document.getElementById("targetID").style.top = "auto";};
window.onscroll=testScroll; };
</script>
4

3 に答える 3

3

質問に完全に答えるには、次を使用できます。

window.onscroll(function() {
    document.getElementById("target-id").style.display = "block";
});

この関数は、ウィンドウがスクロールされたときにトリガーされます。この関数を div をドラッグするための関数内に配置することをお勧めします。これにより、ユーザーが単にページをスクロールしている場合にこの関数が呼び出されなくなります。たとえば、「ウィンドウが 400px スクロールされたときに追加の div を表示する」など、ウィンドウをスクロールする特定の量を探している場合は、ここに素晴らしい答えがあります:ウィンドウが特定の位置にスクロールされたときにイベントをトリガーする

window.scroll はすぐに呼び出され、探しているものとはまったく異なる可能性があるため、提供したリンクを使用して位置を設定することをお勧めします。

于 2013-07-27T07:53:19.523 に答える
1

サードパーティの JavaScript (例: jQuery) を使用しない場合は、次のように使用します。

    document.getElementById('target-id').style.display = 'none'; // hide it
    document.getElementById('target-id').style.display = 'block'; // show it (for block element, eg: div)
    document.getElementById('target-id').style.display = 'inline'; // show it (for inline element, eg: span)
于 2013-07-27T07:24:07.493 に答える
1 
document.getElementById("target-id").style.visibility = "visible";   //To show the element.

編集済み..

通常の Javascript を使用してこれを実現できます。

<script>
function scrollFunction() {
     document.getElementById("target-id").style.visibility = "hidden";   //To hide the element.
}

window.onscroll = scrollFunction;
</script>
于 2013-07-27T07:30:16.470 に答える