Javascript 当div在底部粘滞时，正文文本被隐藏

我尝试使用javascript/jquery修复页面底部的粘性，但粘性隐藏在正文文本中。我需要显示所有正文文本，没有隐藏和粘性，我无法找出问题，请任何人告诉我我的代码中有什么问题

JS

var link = $('#navbar');
var offset = link.offset();
var top = offset.top;
var left = offset.left;
var bottom = $(window).height() - top - link.height();
bottom = offset.top - bottom;
var right = $(window).width() - link.width();
right = offset.left - right;

CSS:

#navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  color: #fff;
  min-height: 50px;
  max-height: 150px;

  overflow: hidden;
  background-color: #333;
}

---

简单，您只需使用css的

边距底部

属性

<div class="content" style="margin-bottom: 100px">

---

您可以给出一个填充：底部；内容div的值

.content {
    padding-bottom: 88px;   
}

但是如果你喜欢这样，也许你必须写一些媒体查询，因为文本会换行，高度会改变。在这种情况下，您可以使用此方法

$(".content").css("padding-bottom",$("#navbar").height());

---

您需要将

边距底部

指定给

.content

等于

#navbar

高度…因此只需使用

outerHeight（）

jQuery计算

#navbar

高度，并将该值应用于

.content

使用

css（）

jQuery即可

var-link=$（'#navbar'）；
变量内容=$（'.content'）；
var linkHeight=link.outerHeight（）；
content.css({
“页边距底部”：链接高度
});
正文{
保证金：0；
字号：28px；
}
.标题{
背景色：#f1f1；
填充：30px；
文本对齐：居中；
}
#导航栏{
位置：固定；
底部：0；
宽度：100%；
颜色：#fff；
最小高度：50px；
最大高度：150像素；
溢出：隐藏；
背景色：#333；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}
#导航条a.激活{
背景色：#4CAF50；
颜色：白色；
}
.内容{
填充：16px；
}
.粘的{
位置：相对位置；
底部：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}

向下滚动
向下滚动以查看粘性效果

粘性导航示例
当您到达滚动位置时，导航栏将粘在顶部

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告没有任何骚扰和暴力。illum定义了“不存在”，maluisset总结了“不存在”和“不存在”的含义。因为荣耀的原因，我永远爱你。艾弗特实验室

一些文本以启用滚动。。Lorem ipsum dolor坐在amet的初效医生的位子上，他的广告是无胎记的

您必须使用边距底部来实现您想要的

$（“.content”）.css（“页边距底部，$（“#导航栏”）.height（））；

您可以使用此代码块根据静态栏高度动态设置内容的边距底部

希望这有帮助
我不认为这是正确的解决方案，因为如果粘滞条高度为100px，解决方案是好的，但在未来粘滞条高度可能会增加100px到120px，这种情况下它不会再起作用，我必须更改页边距底部值