특정 지점에서 고정 위치 스크롤을 중지하시겠습니까?
위치 요소가 있습니다. 고정되어 있기 때문에 원하는 대로 페이지를 스크롤할 수 있습니다.사용자가 위로 스크롤할 때 요소가 특정 지점에서 스크롤을 멈추기를 원합니다. 예를 들어, 페이지 상단에서 250px일 때, 이것이 가능합니까?도움이나 조언이 있으면 도움이 될 것입니다. 감사합니다!
그러기 위해서는 jquery를 사용해야 할 것 같은 느낌이 들었습니다.사용자가 있는 곳의 스크롤이나 위치를 알아내려고 했는데 정말 혼란스러웠는데, 혹시 jquery 해결책이 있나요?
이런 거 말씀하시는 건가요?
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 100 - $(this).scrollTop()));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div>
<!-- random filler to allow for scrolling -->
STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>다음은 방금 작성한 빠른 jQuery 플러그인으로 필요한 작업을 수행할 수 있습니다.
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#yourDiv').followTo(250);
다음은 이 문제를 해결하는 완전한 jquery 플러그인입니다.
https://github.com/bigspotteddog/ScrollToFixed
이 플러그인에 대한 설명은 다음과 같습니다.
이 플러그인은 요소가 보기에서 수직으로 스크롤된 경우 페이지 상단에 요소를 고정하는 데 사용됩니다. 그러나 수평 스크롤을 사용하여 요소를 계속 왼쪽 또는 오른쪽으로 이동할 수 있습니다.
옵션 여백Top을 지정하면 수직 스크롤이 대상 위치에 도달하면 요소가 수직 위로 이동을 중지하지만 페이지가 왼쪽 또는 오른쪽으로 스크롤될 때 요소가 수평으로 계속 이동합니다.페이지가 대상 위치를 지나 다시 아래로 스크롤되면 요소가 페이지의 원래 위치로 복원됩니다.
이 플러그인은 Firefox 3/4, Google Chrome 10/11, Safari 5 및 Internet Explorer 8/9에서 테스트되었습니다.
특정 사례에 대한 사용:
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>
$(document).ready(function() {
$('#mydiv').scrollToFixed({ marginTop: 250 });
});
가능한 CSS ONLY 솔루션은 다음을 사용하여 보관할 수 있습니다.position: sticky;
브라우저 지원은 실제로 매우 좋습니다. https://caniuse.com/ #search=position%3A%20 스틱
여기 예가 있습니다: https://jsfiddle.net/0vcoa43L/7/
제임스 몽테뉴가 답변한 코드로 수행한 작업을 수행할 수 있지만, 그렇게 하면 크롬에서 깜박입니다(V19에서 테스트됨).
"top" 대신 "margin-top"을 입력하면 수정할 수 있습니다.왜 그것이 마진과 함께 작동하는지 정말 모르겠습니다.
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
나의 해결책
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
} else {
$("#theRelative").css("margin-top",$(this).scrollTop()-0);
}
});
});
프로젝트에서, 저는 실제로 페이지 로드 시 화면 하단에 일부 제목을 고정했습니다(그림 앱이므로 넓은 뷰포트에서 캔버스 요소에 최대 공간을 제공하기 위해 제목이 하단에 있습니다).
제목이 바닥글 위에 있는 것을 원하지 않기 때문에 제목이 스크롤에서 바닥글에 도달할 때 '절대'가 되어야 했습니다(제목 색상은 바닥글 배경색과 동일합니다).
저는 여기서 가장 오래된 응답(Gearge Millo 편집)을 받았고 그 코드 스니펫은 제 사용 사례에 효과가 있었습니다.좀 놀아서 이 일을 할 수 있었습니다.이제 고정 제목은 바닥글에 도달하면 바닥글 위에 아름답게 배치됩니다.
제 사용 사례와 작동 방식을 공유하고 감사하다는 인사를 드려야겠다고 생각했습니다.앱: http://joefalconer.com/web_projects/drawingapp/index.html
/* CSS */
@media screen and (min-width: 1100px) {
#heading {
height: 80px;
width: 100%;
position: absolute; /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
bottom: 0;
}
}
// jQuery
// Stop the fixed heading from scrolling over the footer
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css( { position: 'absolute', bottom: '-180px' } );
} else {
$this.css( { position: 'fixed', bottom: '0' } );
}
});
};
// This behaviour is only needed for wide view ports
if ( $('#heading').css("position") === "absolute" ) {
$('#heading').followTo(180);
}
저는 이 기능을 특징으로 하는 블로그 게시물을 작성했습니다.
$.fn.myFixture = function (settings) {
return this.each(function () {
// default css declaration
var elem = $(this).css('position', 'fixed');
var setPosition = function () {
var top = 0;
// get no of pixels hidden above the the window
var scrollTop = $(window).scrollTop();
// get elements distance from top of window
var topBuffer = ((settings.topBoundary || 0) - scrollTop);
// update position if required
if (topBuffer >= 0) { top += topBuffer }
elem.css('top', top);
};
$(window).bind('scroll', setPosition);
setPosition();
});
};
Mootools Framework를 사용하는 솔루션입니다.
http://mootools.net/docs/more/Fx/Fx.Scroll
$('myElement').getPosition(.x)을 사용하여 스크롤을 중지할 요소의 위치(x & y)를 가져옵니다.
$('myElement').getPosition(.y)
애니메이션 종류의 스크롤에는 다음을 사용합니다.
새 Fx.Scroll('crollDivId', {offset: {x: 24,y: 432}})을(를) 위쪽()으로 이동합니다.
스크롤을 바로 설정하려면 다음을 사용합니다.
새 Fx.Scroll(myElement)입니다.set(x,y);
이것이 도움이 되기를 바랍니다!! :D
이 솔루션이 마음에 들었습니다.
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
제 문제는 Adobe Muse에서 위치 관련 컨테이너를 처리해야 한다는 것이었습니다.
내 솔루션:
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
}
});
방금 즉석 mVChr 코드
$(".sidebar").css('position', 'fixed')
var windw = this;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(windw);
$window.scroll(function(e) {
if ($window.scrollTop() > pos) {
topPos = pos + $($this).height();
$this.css({
position: 'absolute',
top: topPos
});
} else {
$this.css({
position: 'fixed',
top: 250 //set your value
});
}
});
};
var height = $("body").height() - $("#footer").height() ;
$('.sidebar').followTo(height);
$('.sidebar').scrollTo($('html').offset().top);
저는 @mVchr의 답변을 고정 위치 설정에 사용하도록 조정했습니다. 헤더 정크가 화면 밖으로 나올 때까지 완전히 배치(스크롤)해야 하지만 그 이후에도 고정/화면에 표시되어야 하는 경우:
$.fn.followTo = function (pos) {
var stickyAd = $(this),
theWindow = $(window);
$(window).scroll(function (e) {
if ($(window).scrollTop() > pos) {
stickyAd.css({'position': 'fixed','top': '0'});
} else {
stickyAd.css({'position': 'absolute','top': pos});
}
});
};
$('#sticky-ad').followTo(740);
CSS:
#sticky-ad {
float: left;
display: block;
position: absolute;
top: 740px;
left: -664px;
margin-left: 50%;
z-index: 9999;
}
저는 @james 답변을 좋아했지만 반대로, 즉 바닥글 바로 전에 고정된 위치를 멈추는 것을 찾고 있었습니다. 제가 생각해 낸 것은 다음과 같습니다.
var $fixed_element = $(".some_element")
if($fixed_element.length){
var $offset = $(".footer").position().top,
$wh = $(window).innerHeight(),
$diff = $offset - $wh,
$scrolled = $(window).scrollTop();
$fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
}
이제 고정 요소는 바닥글 바로 앞에서 중지됩니다.그리고 그것과 겹치지 않을 것입니다.
언급URL : https://stackoverflow.com/questions/5902822/stopping-fixed-position-scrolling-at-a-certain-point
'programing' 카테고리의 다른 글
| 내 AMD 기반 기계는 리틀 엔디안 또는 빅 엔디안을 사용합니까? (0) | 2023.08.23 |
|---|---|
| CSS를 사용하여 두 번째 마지막 요소 선택 (0) | 2023.08.23 |
| 이미 데이터가 있는 MySQL 데이터베이스 필드에 데이터 추가 (0) | 2023.08.18 |
| 붙여넣기 입력 캡처 (0) | 2023.08.18 |
| 다중 XMLHttpRequest를 사용하는 방법은 무엇입니까? (0) | 2023.08.18 |