停止位置：在某个点固定div（在页脚开始之前）
[英]Stopping position:fixed div at certain point (before footer starts)
问题描述
The problem has been discussed on the forum a few times however I cannot make it work so I ask for help. 
这个问题已经在论坛上讨论了几次，但是我无法使它工作，所以我寻求帮助。
I have a side contact menu (as a widget) in my WP website and made it position: fixed so it doesn't change position during scrolling. 我在WP网站上有一个侧面联系人菜单（作为一个小部件），并使其位置：固定，因此在滚动期间不会改变位置。 However, I want it to stop being fixed before it hits footer div because it just looks weird. 但是，我希望它在它击中页脚div之前不再被修复，因为它看起来很奇怪。
As far as I read I need jquery and a script that changes my fixed position to a relative at some point so I feel like I understand the basic mechanic of it and even found several scripts but all of them doesn't work at all. 据我所知，我需要jquery和一个脚本，在某些时候将我的固定位置更改为亲戚，所以我觉得我理解它的基本机制，甚至发现了几个脚本，但所有脚本根本不起作用。
I want something exactly like in here: Stop fixed position at certain div or certain position 我想要一些与此类似的东西： 在某个div或某个位置停止固定位置
I created 3 files: html, css, js and put all the codes from the answer and it just does not work at all.. 我创建了3个文件：html，css，js并将答案中的所有代码放入其中并且根本不起作用..
My js file - java.js 我的js文件 - java.js
jQuery(document).ready(function() {
var navTop = $('#nav').offset().top;
var navStop = $('#stop').offset().top;
var lastMode = "absolute";
$(window).scroll(function() {
var mode;
if ($(this).scrollTop() >= navTop) {
if ($(this).scrollTop() - navStop + $('#nav').height() > 0)
mode = 'absolute';
else
mode = 'fixed';
} else {
mode = 'absolute';
}
if (lastMode !== mode) {
if (mode == 'fixed') {
$('#nav').css('position', 'fixed');
$('#nav').css('top', '0');
} else {
$('#nav').css('position', 'absolute');
$('#nav').css('top', navTop);
}
lastMode = mode;
}
});
}
My css file- style.css: 我的css文件 - style.css：
#nav {
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 200px;
width: 100px;
height: 50px;
}
#stop {
width: 100%;
background: blue;
height: 300px;
position: absolute;
top: 900px;
margin-top: 20px;
}
My html doc - index.html 我的html doc - index.html
<link rel="stylesheet" type="text/css" href="style.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="javascript" src="java.js"></script>
<body style="height:5000px;">
<div id="nav"></div>
<div id="stop"></div>
</body>
Since the code above is just an answer from another topic - I wanted to change it for my needs but it seems I do something wrong because it does not work. 由于上面的代码只是另一个主题的答案 - 我想根据我的需要改变它，但似乎我做错了，因为它不起作用。
To detail: I want side contact menu <div class="widget-contact"> to start normally like it is right now (position fixed) and stop it from being fixed when it hits <div id="colophon-inside" class="footer-three"> 详细说明：我希望侧面联系菜单<div class="widget-contact">正常启动，就像它现在一样（位置固定），当它点击<div id="colophon-inside" class="footer-three">时阻止它被修复<div id="colophon-inside" class="footer-three">
I am fine using html/css however I do not understand js and I feel my problem is quite easy to solve. 我很好用html / css然而我不懂js而且我觉得我的问题很容易解决。
Could you help? 你能帮忙吗？
2 个解决方案
解决方案1
0 2019-05-01 14:19:26
https://jsfiddle.net/42muhgj3/1/ https://jsfiddle.net/42muhgj3/1/
$(window).scroll(function() {
const pos = Math.max(5, 200 - $(this).scrollTop());
// maximum 200, minimum 5, according to scrollTop
$('#nav').css('top', pos + 'px');
console.log(pos);
});
css CSS
#nav {
background: rgba(0, 0, 0, 0.5);
position: sticky;
top: 200px;
width: 100px;
height: 50px;
}
解决方案2
0 已采纳 2019-05-01 14:23:35
Your code works. 你的代码有效。 You just missed out a ")" at the end of your javascript file. 你刚刚错过了javascript文件末尾的“）”。 So completing your JS file it should be: 所以完成你的JS文件应该是：
jQuery(document).ready(function() {
var navTop = $('#nav').offset().top;
var navStop = $('#stop').offset().top;
var lastMode = "absolute";
$(window).scroll(function() {
var mode;
if ($(this).scrollTop() >= navTop) {
if ($(this).scrollTop() - navStop + $('#nav').height() > 0)
mode = 'absolute';
else
mode = 'fixed';
} else {
mode = 'absolute';
}
if (lastMode !== mode) {
if (mode == 'fixed') {
$('#nav').css('position', 'fixed');
$('#nav').css('top', '0');
} else {
$('#nav').css('position', 'absolute');
$('#nav').css('top', navTop);
}
lastMode = mode;
}
});
})
Here I say this is "Solved" 在这里我说这是“解决了”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.