在窗口底部的固定div的一种更清晰的方式，但是保持在页脚的上方，并触发页面宽度 [英] A cleaner way for a fixed div at bottom of the window but stays above the footer and triggers on page width

问题描述

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

I've created a sticky bar to stay at the bottom of the window. As the user scrolls down to the bottom of the page the same bar will stay fixed until the footer shows, then removes its fixed position, temporarily, to stay above the footer until the user scrolls back up and it remains fixed again.

我只想在页面宽度大于680像素时发生。下面的任何内容都会将粘条保留在默认位置（CSS：position：inherit）。

I only want to happen when the page is wider than 680px. Anything under that will keep the sticky bar in a default position (CSS: position:inherit).

这是网站： http://ttd.firefly-digital.co.uk

它的工作原理预期。但是，当我在Mac上测试Chrome时，它触发我的CPU风扇，这表明这不是很有效率，并且我的有限的JavaScript技能，想知道是否有一个更清洁的方法来实现这一点？

It works as expected. However, when I test on Chrome in Mac it triggers my CPU fan which suggests this not very efficient and with my limited JavaScript skills, wondered if there is a cleaner way to achieve this is?

这是目前的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"
        });
    }

});

CSS代码

.contact-bar {
    background: $contact-bar;
    width: 100%;
    height: 40px;
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 10;
}

推荐答案

。使其没有任何JavaScript（包括媒体查询），使得没有位置固定的栏位在页脚之上。比添加一个固定类与位置：固定和底部：0，将相应地添加。像这样：

You can do it in reverse. Make it so that the bar, without position fixed, is above the footer without any JavaScript (incl. media queries). Than add a fixed class with position:fixed and bottom:0 that will be added accordingly. Like so:

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

将触发此操作的 jquery 代码如下： / p>

The jquery code that will trigger this, is as follows:

$(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。例如：

Then add a few lines that the above code will only fire if the window width is > 680, either with jquery or pure javascript. For example with:

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

请注意，我没有测试这个，所以如果它不工作，请评论。信用：防止元素显示在页脚顶部当使用position：fixed

Do note I have not tested this, so please comment if it doesn't work. Credit: Preventing element from displaying on top of footer when using position:fixed

这篇关于在窗口底部的固定div的一种更清晰的方式，但是保持在页脚的上方，并触发页面宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！