Question

我试图在视口的底部保留两个按钮，它在jsfiddle中工作。但是，一旦我把它放入网页，我就会在js的第7行和第9行出错。

function checkOffset() {
if($('#button-float').offset().top + $('#button-float').height() 
                                       >= $('#Footer').offset().top - 50)
    $('#button-float').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#Footer').offset().top)
    $('#button-float').css('position', 'fixed'); // restore when you scroll up
$('#button-float')($(document).scrollTop() + window.innerHeight);
}
$(document).scroll(function() {
checkOffset();
});

如果我把它放入脚本标签中，我会不断收到错误。它只是在浏览器中打破。任何帮助都会受到欢迎。

这里可以看到工作版本。

https://jsfiddle.net/damianbuttle/2bwyge6o/

Answer 1

以下行中的语法错误：

$('#button-float')($(document).scrollTop() + window.innerHeight);

我想它应该是：

$('#button-float').css('height', $(document).scrollTop() + window.innerHeight);

希望这有帮助。

Answer 2

没有必要使用JavaScript，因为CSS可以解决问题。

我通过以下方式修复了您的JSFiddle：

将button-float移至您的footer：

<div id="Footer">
  <div id="button-float">
      <ul>
          <li><a href="mysearches.html">my searches</a></li>
          <li><a href="#contact">contact</a></li>
      </ul>
    </div>
</div>

将页脚的位置更改为固定，并将其高度更改为50px：

#footer {
    height: 50px;
    border-top: 2px solid #a4cd55;
    background-color: #e8e8e8;
    width: 100%;
    position: fixed;
}

为您的身体添加了一个边距：

body {
  margin-bottom: 50px;
}

停留在视口底部的按钮

2 个答案: