帆布外推腳

Question

我正在嘗試構建畫布外的頁腳。
這個想法是，當從頁腳菜單中選擇不同的選項時，頁面的其余部分將被上推以顯示頁腳內容
有一個滑動頁腳菜單的教程在這里 ，但是因為它的幻燈片頁面頂部的[頁腳]的內容（如在頂層）這不是我期待的。

通過使用引導“手風琴”，我設法將內容下拉到頁面下方，但是由於該內容不在視野范圍內（瀏覽器窗口），因此恐怕有些訪問者找不到它。

這里是一個FIDDLE

<div class="pushDown">Please scroll down to bottom</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading col-xs-6">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
    </a>
</div>
<div class="panel-heading col-xs-6">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
      Collapsible Group Item #2
    </a>
</div>
</div>
<div class="panel panel-default">
<div id="collapseOne" class="panel-collapse collapse">
  <div class="panel-body">
    CONTENT 1
  </div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body">
    CONTENT 2
  </div>
</div>
</div>
</div>

無論如何，是否有面板使其余內容向上推而不是向下推？

選項2-在這里，我對Christopher Yee的插件進行了調整，使其能夠按需工作，但是我只能通過一個按鈕來使用它

推腳

$(function() {
var pushy = $('.pushy'), //menu css class
    body = $('body'),
    container = $('#container'), //container css class
    push = $('.push'), //css class to add pushy capability
    siteOverlay = $('.site-overlay'), //site overlay
    pushyClass = "pushy-left pushy-open", //menu position & menu open class
    pushyActiveClass = "pushy-active", //css class to toggle site overlay
    containerClass = "container-push", //container open class
    pushClass = "push-push", //css class to add pushy capability
    menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
    menuSpeed = 300, //jQuery fallback menu speed
    menuWidth = pushy.width() + "px"; //jQuery fallback menu width

function togglePushy(){
    body.toggleClass(pushyActiveClass); //toggle site overlay
    pushy.toggleClass(pushyClass);
    container.toggleClass(containerClass);
    push.toggleClass(pushClass); //css class to add pushy capability
}

如果我使用類名.pushy-left2 .menu-btn2 .pushy2等，該如何編輯JS。

Answer 1

嘗試使#id停留在頁腳的內容區域，並在手風琴的觸發器中建立鏈接。

當您單擊鏈接時，使其鏈接到內容區域'a href =“ mysite.com/home#article”'

因此它將頁面集中在那條信息上