800px 이후 divon 스크롤다운 표시
페이지 상단에서 800px 이후에 스크롤을 내릴 때 숨겨진 디브를 보여주고 싶습니다.지금쯤은 이 예시가 있지만, 제가 찾고 있는 것을 달성하기 위해서는 수정이 필요할 것 같습니다.
편집:
[그리고 스크롤업과 높이가 800px 이하일 때 이 디브는 숨어야 합니다.]
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);
}
});
});
});
여기 내 현재 코드의 Fiddle이 있습니다.
여러 픽셀을 스크롤한 후 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() 설명서
픽셀 수를 스크롤해서 디브를 보여주고 싶다면,
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>.scroly용 설명서
.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;, 대신 요소의 부모의 오프셋을 잡습니다.
.각각()에 대한 설명서
.parent()에 대한 설명서
.offset() 설명서
일단 페이지로 스크롤하면 nav 또는 div 스틱 또는 도크가 페이지 상단으로 이동하고 다시 스크롤하면 stick/dock 해제하려면 다음을 수행합니다.
$(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>거기에 몇 가지 일이 있습니다.첫번째, 왜 수업을?실제로 페이지에 이런 것들이 여러 개 있습니까?CSS에 의하면 그럴 수 없다고 합니다.그렇지 않다면 ID를 사용해야 합니다. CSS와 jQuery에서 둘 다 선택하는 것이 더 빠릅니다.
<div id=bottomMenu>You read it all.</div>
둘째, CSS에서 몇 가지 말도 안 되는 일들이 벌어지고 있습니다. 특히 z 지수는 픽셀 단위가 아니라 단지 숫자여야 합니다.이 태그가 어떤 계층에 있는지, 각 높은 숫자가 사용자에게 더 가까운 위치에 있는지(또는 다른 방법으로 z-인덱스가 낮은 태그 위에/포함) 지정합니다.
수행하려는 애니메이션은 기본적으로 .fadeIn()이므로 div를 none으로 설정하고 처음에는 .fadeIn()을 사용하여 애니메이션을 만듭니다.
$('#bottomMenu').fadeIn(2000);
.fadeIn()은 먼저 display: (태그의 적절한 디스플레이 속성이 무엇이든 간에) oplacity: 0을 수행한 다음 점차 oplacity를 높임으로써 작동합니다.
전체 작동 예제:
http://jsfiddle.net/b9chris/sMyfT/
CSS:
#bottomMenu {
display: none;
position: fixed;
left: 0; bottom: 0;
width: 100%; height: 60px;
border-top: 1px solid #000;
background: #fff;
z-index: 1;
}
JS:
var $win = $(window);
function checkScroll() {
if ($win.scrollTop() > 100) {
$win.off('scroll', checkScroll);
$('#bottomMenu').fadeIn(2000);
}
}
$win.scroll(checkScroll);
당신도 할 수 있어요, 이렇게.
$(window).on("scroll", function () {
if ($(this).scrollTop() > 800) {
#code here
} else {
#code here
}
});
스크롤 막대 &$(window).scrollTop()
제가 발견한 것은 위에 제공된 솔루션과 같은 기능을 사용할 경우 스크롤 바가 실제로 표시되고 작동할 때만 성공할 수 있다는 것입니다.
만약 (내가 어리석게도 시도한 것처럼) 당신이 그러한 기능을 구현하기를 원하고, 또한 당신은 스크롤 바가 없는 미니멀리즘의 "클린 스크린"을 구현하기를 원할까요? 이 논의에서, 다음과 같습니다.$(window).scrollTop()작동하지 않습니다.
프로그래밍의 기본 요소일 수도 있지만, 오랜 시간 동안 이 문제를 파악했기 때문에, 저는 다른 신입들에게도 이 문제를 알려줄 것이라고 생각했습니다.
만약 누군가가 이것을 극복하는 방법에 대해 조언을 해줄 수 있거나 조금 더 통찰력을 줄 수 있다면, 자유롭게 대답하세요. 왜냐하면 저는 여기서 대신 마우스 오버/마우스 휴가를 보여주는 것/숨겨야 했기 때문입니다.
오래 살고 계획해요, 콜리 G.
언급URL : https://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px
'programing' 카테고리의 다른 글
| WooCommerce에서 모든 체크아웃 필드를 가져오는 방법은? (0) | 2023.11.04 |
|---|---|
| 자바스크립트 .replace는 첫번째 Match만 바꿉니다. (0) | 2023.11.04 |
| Tensorflow에서 그래프의 모든 Tensor의 이름을 가져옵니다. (0) | 2023.10.30 |
| 면도기 뷰에서 .css 파일을 참조하는 방법은 무엇입니까? (0) | 2023.10.30 |
| WordPress가 특정 기능을 가진 사용자를 나열하는 방법 (0) | 2023.10.30 |