[英]fixed div while scrolling which moves other elements in a menu
I have some menu items on the right hand side of my website that are: - 我的网站右侧有一些菜单项,它们是:-
I want the basket summary to follow down the page as the page is scrolled, I know how to this using position: fixed, but I need it to also move the other elements out of the way otherwise it will just overlap them. 我希望购物篮摘要在页面滚动时跟随页面,我知道如何使用position:fixed,但是我需要它还将其他元素移开,否则它将与它们重叠。
I was looking at this: jsfiddle which would do the job and works but obviously thats only on button click, I would need to adapt this to scroll via jQuery. 我正在看这个: jsfiddle可以完成工作并起作用,但是显然那只是在单击按钮时,我需要调整它才能通过jQuery滚动。
I have read many tutorials for floated fixed divs but they are all for one div and don't have any other divs to interact with. 我已经阅读了很多关于浮动div的教程,但它们都是针对一个div的,并且没有其他可与之交互的div。
Any ideas if possible and/or how to do it? 有什么想法和/或如何做?
Code from js fiddle as follows: - js提琴的代码如下:-
$(function() {
$('.upButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertBefore($parent.prev());
});
$('.downButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertAfter($parent.next());
});
});
Is this what you're looking for?: http://jsfiddle.net/cmontgomery/YVh4q/ 这是您要找的吗?: http : //jsfiddle.net/cmontgomery/YVh4q/
essentially, whenever the window scrolls check to see if your section is in the visible area and if not, adjust accordingly: 本质上,每当窗口滚动时,都要检查您的区域是否在可见区域中,如果没有,请相应地进行调整:
$(window).scroll(function () {
var mover = $("#sidebar .quick-links");
if($(window).scrollTop() === 0) {
//console.log("to top");
mover.prependTo("#sidebar");
} else if(!isFullyInViewableArea(mover)) {
var parent = mover.closest('.section');
if(isBelowViewableArea(mover)) {
//console.log("moving up");
parent.insertBefore(parent.prev());
} else {
//console.log("moving down");
parent.insertAfter(parent.next());
}
}
});
I must admit, this solution is not the best user experience, ie it jumps instead of scrolling smoothly. 我必须承认,这种解决方案并不是最佳的用户体验,即它会跳转而不是平滑滚动。 If it were me I would put the movable section as the last item in the right column and move that down the page with absolute positioning so it follows the top of the view-able area exactly.
如果是我,我将可移动部分放在右列的最后一个项目中,并通过绝对定位将其向下移动到页面上,以便它精确地跟随可查看区域的顶部。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.