Javascript 窗口底部固定div的更简洁方式，但保持在页脚上方，并在页面宽度上触发

我在窗口底部创建了一个粘滞条。当用户向下滚动到页面底部时，同一条将保持固定，直到页脚显示，然后临时移除其固定位置，保持在页脚上方，直到用户向后滚动并再次保持固定

我只想在页面宽度超过680px时发生。下面的任何内容都将使粘滞条保持在默认位置（CSS:position:inherit）

这是网站：

它按预期工作。然而，当我在Mac上测试Chrome时，它会触发我的CPU风扇，这表明这不是非常有效，而且我的JavaScript技能有限，我想知道是否有更干净的方法来实现这一点

这是当前的js代码：

$(window).scroll(function(event) {

    var scroll = $(this).scrollTop();
    var docHeight = $(document).height();
    var windowHeight = $(window).height();
    var footerHeight = $('.footer').height();

    if(docHeight - (windowHeight + scroll) < footerHeight) {
        $('.contact-bar').css({
            bottom: footerHeight - (docHeight - (windowHeight + scroll))
        });
    } else {
        $('.contact-bar').css({
            bottom: 0
        });
    }

});

var windowWidth = $(window).width();

$(window).resize(function() {
    windowWidth = $(window).width();

    if(windowWidth > 680) {
        $('.contact-bar').css({
            position: "fixed"
        });
    } else {
        $('.contact-bar').css({
            position: "inherit"
        });
    }

});

---

你可以反过来做。使其在不固定位置的情况下位于页脚上方，而不使用任何JavaScript（包括媒体查询）。然后添加一个位置为固定且底部为0的固定类，该类将相应地添加。像这样：

.contact-bar.fixed { position:fixed; bottom:0; }

触发此操作的jquery代码如下：

$(window).scroll(function (event) {
   var windowTop = $(this).scrollTop();        
     if (windowTop >= $(".footer").offset().top) {
        $(".contact-bar").addClass("fixed");
      } else {
        $(".contact-bar").removeClass("fixed");
      }
});

然后添加几行代码，只有当窗口宽度大于680时，上面的代码才会使用jquery或纯javascript激发这些行。例如：

  if ($(window).width() < 960) { // above function } 

if（$（window）.width（）<960）{//over function}

---

请注意，我没有测试这个，所以请评论，如果它不工作。信用证：

您最好使用类来针对您的元素，至少可以防止jQuery使用选择器适当地遍历整个DOM，这在性能上是很好的。

谢谢，我会在接下来的几天回到我的计算机前查看一下，我会让您知道的。快速浏览一下，我可以使用其中的一些来清理代码。让我来吧……与论坛网站不同，我们不使用“谢谢”或“感谢任何帮助”或签名。请看。顺便说一句，这是“提前感谢”，而不是“提前感谢”。哇，对这里的事情很挑剔。别担心，我会保持我的礼貌。谢谢你的语法纠正。我的诵读困难确实令人沮丧，我试过了，但有时会漏掉。请点击我包含的链接。你可能会更好地理解我们为什么“挑剔”关于“礼貌”，明白了，开门见山。有这么多时间在手上一定很好：）不，搜索“谢谢”很快，我用的是固定的评论，所以这是我在等待编译完成时可以做的事情。

  if ($(window).width() < 960) { // above function }