위치 : 고정 된 요소가 있으므로 원하는 방식으로 페이지를 스크롤합니다. 사용자가 위로 스크롤 할 때 요소가 특정 지점 (예 : 페이지 상단에서 250px)에서 스크롤을 중지하기를 원합니다. 이것이 가능합니까? 도움이나 조언이 도움이 될 것입니다.
그렇게하려면 jquery를 사용해야한다는 느낌이 들었습니다. 사용자가있는 위치의 스크롤링이나 위치를 확인했지만 정말 혼란 스러웠습니다. jquery 솔루션이 있습니까?
답변:
다음은 필요한 작업을 수행 할 수있는 빠른 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);
$('window')따옴표로 묶어서는 안됩니다. 하지만 덕분에 매우 도움이되었습니다.
이런 말인가요?
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});
bottom,이 계산 된 값 (250 오프셋)을 제외하고 는 최대입니다.
다음은이 문제를 해결하는 완전한 jquery 플러그인입니다.
https://github.com/bigspotteddog/ScrollToFixed
이 플러그인에 대한 설명은 다음과 같습니다.
이 플러그인은 요소가보기에서 세로로 스크롤 된 경우 페이지 상단에 요소를 고정하는 데 사용됩니다. 그러나 가로 스크롤을 사용하여 요소가 계속 왼쪽 또는 오른쪽으로 이동할 수 있습니다.
marginTop 옵션이 주어지면 수직 스크롤이 목표 위치에 도달하면 요소가 수직 위로 이동을 중지합니다. 그러나 페이지가 왼쪽 또는 오른쪽으로 스크롤 될 때 요소는 여전히 수평으로 이동합니다. 페이지가 대상 위치를지나 아래로 스크롤되면 요소가 페이지의 원래 위치로 복원됩니다.
이 플러그인은 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 });
});
James Montagne가 그의 답변에서 자신의 코드로 한 일을 할 수 있지만 Chrome에서 깜박입니다 (V19에서 테스트 됨).
"top"대신 "margin-top"을 입력하면 문제를 해결할 수 있습니다. 왜 그것이 margin tho와 함께 작동하는지 정말로 모릅니다.
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
가능한 CSS 전용 솔루션은 다음을 통해 달성 할 수 있습니다.position: sticky;
브라우저 지원은 실제로 정말 좋습니다 : https://caniuse.com/#search=position%3A%20sticky
다음은 예입니다 : https://jsfiddle.net/0vcoa43L/7/
내 솔루션
$(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
애니메이션 종류의 스크롤 사용 :
new Fx.Scroll ( 'scrollDivId', {오프셋 : {x : 24, y : 432}}). toTop ();
스크롤을 즉시 설정하려면 다음을 사용하십시오.
new Fx.Scroll (myElement) .set (x, y);
도움이 되었기를 바랍니다 !! :디
이 솔루션이 마음에 들었습니다.
$(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);$(this)하고 $(window)변수 에 저장하는 이유 는 그렇게하면됩니다 $this.height(). 상단 위치를 설정하는 대신 플러그인이 원래 상단 값을 저장하고 고정 너비를 설정할 때 원래 값으로 되 돌리면 더 좋지 않을까요? 또한 무엇을 의미 Just improvised mVChr code합니까?
@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));
}이제 고정 요소는 바닥 글 바로 앞에서 중지됩니다. 그것과 겹치지 않을 것입니다.