800px以降でscrollDownしたときにdivを表示する
2023-08-07 05:31:54
質問
ページ上部から800pxを越えてスクロールダウンしたときに、hidden divを表示したい。現在、私はこの例を持っていますが、私はそれが私が探しているものを達成するために変更が必要であると思います。
編集してください。
[スクロールアップして高さが800px以下になったら、このdivは隠れるはずです] 。
HTMLです。
<div class="bottomMenu">
<!-- content -->
</div>
cssを使用します。
.bottomMenu {
width: 100%;
height: 60px;
border-top: 1px solid #000;
position: fixed;
bottom: 0px;
z-index: 100;
opacity: 0;
}
jQueryを使用します。
$(document).ready(function() {
$(window).scroll( function(){
$('.bottomMenu').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
ここでは フィドル で、私の現在のコードの
どのように解決するのですか?
何ピクセルかスクロールした後にdivを表示させたい場合。
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll down... </p>
<div class="bottomMenu"></div>
シンプルでありながら、効果的です。
.scroll()のドキュメント
.scrollTop()のドキュメント
何ピクセルかスクロールした後にdivを表示させたい場合。
jQueryなしで。
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y >= 800) {
myID.className = "bottomMenu show"
} else {
myID.className = "bottomMenu hide"
}
};
window.addEventListener("scroll", myScrollFunc);
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y >= 800) {
myID.className = "bottomMenu show"
} else {
myID.className = "bottomMenu hide"
}
};
window.addEventListener("scroll", myScrollFunc);
body {
height: 2000px;
}
.bottomMenu {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
transition: all 1s;
}
.hide {
opacity: 0;
left: -100%;
}
.show {
opacity: 1;
left: 0;
}
<div id="myID" class="bottomMenu hide"></div>
.scrollYのドキュメント
.classNameのドキュメント
.addEventListener のドキュメント。
要素までスクロールした後に表示したい場合。
$('h1').each(function () {
var y = $(document).scrollTop();
var t = $(this).parent().offset().top;
if (y > t) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
$(document).scroll(function() {
//Show element after user scrolls 800px
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
// Show element after user scrolls past
// the top edge of its parent
$('h1').each(function() {
var t = $(this).parent().offset().top;
if (y > t) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
.scrollPast {
width: 100%;
height: 150px;
background: blue;
position: relative;
top: 50px;
margin: 20px 0;
}
h1 {
display: none;
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll Down...</p>
<div class="scrollPast">
<h1>I fade in when you scroll to my parent</h1>
</div>
<div class="scrollPast">
<h1>I fade in when you scroll to my parent</h1>
</div>
<div class="scrollPast">
<h1>I fade in when you scroll to my parent</h1>
</div>
<div class="bottomMenu">I fade in when you scroll past 800px</div>
に設定された要素のオフセットを取得することができないことに注意してください。
display: none;
に設定されている要素のオフセットを取得することはできません。
.each()のためのドキュメント
.parent()のドキュメント
.offset()のドキュメント
ナビやdivを、一度ページ上部に貼り付けたりドッキングさせたりして、スクロールして戻ってくると貼り付けを解除/ドッキング解除するようにしたい場合。
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop();
var navWrap = $('#navWrap').offset().top;
if (y > navWrap) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
#navWrap {
height:70px
}
nav {
height: 70px;
background:gray;
}
.sticky {
position: fixed;
top:0;
}
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop();
var navWrap = $('#navWrap').offset().top;
if (y > navWrap) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
body {
height:1600px;
margin:0;
}
#navWrap {
height:70px
}
nav {
height: 70px;
background:gray;
}
.sticky {
position: fixed;
top:0;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,
imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum
oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<div id="navWrap">
<nav>
<h1>I stick to the top when you scroll down and unstick when you scroll up to my original position</h1>
</nav>
</div>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,
imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum
oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] divをクリックすると、その下にある要素に移動します。
-
[解決済み] JavaScript - 二重引用符のエスケープ
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] jQuery UIダイアログのクローズボタンを削除するには?
-
[解決済み] jQuery: テキストで要素を検索する
-
[解決済み】あるdivの上に別のdivを重ねる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] jQuery UIダイアログのクローズボタンを削除するには?
-
[解決済み] jQuery.ajaxでmultipart/formdataを送信する。
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] jQueryで複数のCSS属性を定義するには?
-
[解決済み] jQueryがどのバージョンで読み込まれているかを確認するには?
-
[解決済み] jQueryを使用してテキストボックスの値を取得するには?
-
[解決済み] jQueryの検証:デフォルトのエラーメッセージを変更する
-
[解決済み] jQuery .onとhoverの使い分けは可能ですか?
-
[解決済み] jQuery OR Selector?