ฉันมีองค์ประกอบที่เป็นตำแหน่ง: คงที่และเลื่อนไปตามหน้าที่ฉันต้องการให้เป็นอย่างไร เมื่อผู้ใช้เลื่อนขึ้นฉันต้องการให้องค์ประกอบหยุดเลื่อนเมื่อถึงจุดหนึ่งบอกว่าเมื่ออยู่ที่ 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
คำอธิบายของปลั๊กอินนี้มีดังนี้:
ปลั๊กอินนี้ใช้เพื่อแก้ไของค์ประกอบที่ด้านบนของหน้าหากองค์ประกอบนั้นจะเลื่อนออกจากมุมมองในแนวตั้ง อย่างไรก็ตามมันช่วยให้องค์ประกอบยังคงเลื่อนไปทางซ้ายหรือขวาด้วยการเลื่อนแนวนอน
เมื่อกำหนดระยะขอบบนตัวเลือกองค์ประกอบจะหยุดเคลื่อนที่ในแนวตั้งขึ้นเมื่อเลื่อนแนวตั้งมาถึงตำแหน่งเป้าหมาย แต่องค์ประกอบจะยังคงเคลื่อนที่ในแนวนอนเมื่อเลื่อนหน้าไปทางซ้ายหรือขวา เมื่อเลื่อนหน้ากลับลงมาเกินตำแหน่งเป้าหมายองค์ประกอบจะกลับคืนสู่ตำแหน่งเดิมบนหน้า
ปลั๊กอินนี้ได้รับการทดสอบใน 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)
คุณสามารถแก้ไขได้หากคุณใส่ "margin-top" แทน "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);
}
});
});
ในโปรเจ็กต์ฉันมีส่วนหัวบางส่วนที่กำหนดไว้ที่ด้านล่างของหน้าจอในการโหลดหน้าเว็บ (เป็นแอพวาดรูปดังนั้นส่วนหัวจึงอยู่ที่ด้านล่างเพื่อให้มีพื้นที่ว่างสูงสุดสำหรับองค์ประกอบ canvas บนวิวพอร์ตแบบกว้าง)
ฉันต้องการให้หัวเรื่องกลายเป็น 'สัมบูรณ์' เมื่อมาถึงส่วนท้ายในการเลื่อนเนื่องจากฉันไม่ต้องการให้หัวเรื่องอยู่เหนือส่วนท้าย (สีของส่วนหัวจะเหมือนกับสีพื้นหลังส่วนท้าย)
ฉันได้รับคำตอบที่เก่าแก่ที่สุดที่นี่ (แก้ไขโดย 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
รับตำแหน่ง (x & y) ขององค์ประกอบที่คุณต้องการหยุดการเลื่อนโดยใช้ $ ('myElement') getPosition (). x
$ ('myElement'). getPosition (). y
สำหรับประเภทการเลื่อนแบบเคลื่อนไหวให้ใช้:
ใหม่ Fx.Scroll ('scrollDivId', {offset: {x: 24, y: 432}}). toTop ();
ในการตั้งค่าการเลื่อนทันทีให้ใช้:
ใหม่ 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));
}
ตอนนี้องค์ประกอบคงที่จะหยุดก่อนส่วนท้าย และจะไม่ทับซ้อนกัน