使用 JS 在特定的流体页面中隐藏页脚答案

【问题标题】：hide footer in a specific fluid page with JS使用 JS 在特定的流体页面中隐藏页脚
【发布时间】：2014-05-11 23:54:27
【问题描述】：

首先，我所说的“流动页面”是什么意思？我的意思是一个长页面，它被分成 id 部分，将这些 id 显示为页面。它最基本的结构是这样的：

    <div class="mainnav">
        <ul>
            <li><a href="#page1">PAGE 1</a></li>
            <li><a href="#page2">PAGE 2</a></li>
            <li><a href="#page3">PAGE 3</a></li>
            <li><a href="#page4">PAGE 4</a></li>
            <li><a href="#page5">PAGE 5</a></li>
        </ul>
    </div>
    <div id="page1" class="container-fluid"> Page 1 content </div>
    <div id="page2" class="container-fluid"> Page 2 content </div>
    <div id="page3" class="container-fluid"> Page 3 content </div>
    <div id="page4" class="container-fluid"> Page 4 content </div>
    <div id="page5" class="container-fluid"> Page 5 content </div>

    <!-- sticky footer -->
    <div class="footer"></div>

因此，您可以看到，每当您点击该 ID 的菜单项时，内容就会向上滑动，直到到达该 ID 并显示内容，就好像它是一个不同的页面一样。够简单！

我的问题是，我的页脚是粘性的，我这样做是为了当您单击下一页 (ID) 时，页脚仍然存在，除了，我不希望它在选择 #page1 时显示。

我尝试构建一个小型 JS，但我的 JS 不太好。这是我的尝试

<script type="text/javascript">
    function hideFooter(){
        $("#homeContainer").css(display:none);
    }

         $(document).ready(function() {
             hideFooter();
    });
</script>

显然，不起作用。这是您可以使用的FIDDLE。

有什么想法吗！？

【问题讨论】：

这是我认为我见过的最无力的尝试。
jsfiddle.net/taHCv/4
@GitaarLAB 内容和样式无关。即使页面是空的，也与我的问题无关。
@GitaarLAB - 这是 JS Fiddle 的问题。如果你打开控制台，你会看到一个错误。我的 七行代码 对实际站点没有任何作用。
@JaredFarrish 谢谢，您的代码让我大致了解了如何解决这个问题。小提琴完美地解决了，但这也是我正在构建的一个更简单的版本，所以我仍然需要让它工作。但正如我所说，我的 JS 不是很好，确实很弱。

标签： javascript jquery html fluid-layout

【解决方案1】：

您只需要在.mainnav a 标签上添加一个处理程序并根据需要进行切换：

$(document).ready(function() {
    Viewport();
    $(window).bind('resize', Viewport);

    $('.mainnav a').click(function(){
        if (this.href.indexOf('#page1') == -1) {
            $('.footer').show();
        } else {
            $('.footer').hide();
        }
    });
});

http://jsfiddle.net/taHCv/4/

【讨论】：