내 목표는
div요소를 클릭하여 아래 / 위로 슬라이드 하는 것입니다. 때 내가 원하는div슬라이드를 아래로 / 아래의 내용까지 또한 위 / 아래 이동합니다. 나는 또한div페이지가 스크롤 될 때 이것이 고정되어 있기를 바랍니다 .
여기 내 시도입니다 ...
HTML :
<div id="slidebox">Some content</div>
<div id="wrap">Some content <input type="button" id="btn" value="Show Div"></div>
CSS :
#slidebox{
height:100px;
display:none;
position:relative;
background:red;
}
#wrap{
height:1000px;
background:green;
position:relative;
}
#btn{
position:absolute;
top:100px;
left:0px;
}
JQuery :
$("#btn").click(function(){
if ($("#slidebox").is(":hidden")){
$("#slidebox").slideDown(1500);
}else{
$("#slidebox").slideUp(1500);
}
});
나는 첫 번째 목표를 달성했습니다. 이 wrap의해 가압된다 slidebox. 그러나 페이지가 스크롤되면 slidebox고정되어 있지 않습니다. 둘 다에서 위치 속성을 변경하려고 시도했지만 divs바람직하지 않은 동작이 시작됩니다. 욕망 효과를 얻기 위해 무엇을 할 수 있습니까? 감사.
위에서 스크롤 위치 가 요소에 x추가되는 클래스 보다 크면 클래스를 추가 할 수 있습니다 .position: fixed;#slidebox
$("#btn").click(function() {
if ($("#slidebox").is(":hidden")) {
$("#slidebox").slideDown(1500);
} else {
$("#slidebox").slideUp(1500);
}
});
$(window).scroll(function() {
$("#slidebox").toggleClass('fixed', $(window).scrollTop() > 10);
})#slidebox {
height: 100px;
display: none;
position: relative;
background: red;
z-index: 1;
}
#slidebox.fixed {
position: fixed;
top: 0;
width: 100%;
}
#wrap {
height: 1000px;
background: green;
position: relative;
}
#btn {
position: absolute;
top: 100px;
left: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slidebox">Some content 1</div>
<div id="wrap">Some content 2<input type="button" id="btn" value="Show Div"></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다