如何添加一個變量到javascript粘性面板？

它可能會過度殺死，但這個工程。我複製了第一個變量，並給它一個新的名字。另外，從call_files/header.html和css/header.css文件中脫離它。相反，我將它鏈接到控制第二個菜單外觀的layout.css。我相信有一種方法可以將它排成一行。如何添加一個變量到javascript粘性面板？

<script type="text/javascript"> 
    $().ready(function() { 
     var stickyPanelOptions = { 
      topPadding: 0, 
      afterDetachCSSClass: "BoxGlow_Grey2", 
      savePanelSpace: true, 
      onDetached: function (detachedPanel, spacerPanel) { 
       call_files/header.html(call_files/header.html() + " has been detached!"); 
       css/header.css("background-color", "#1000ff"); 
      }, 
      onReAttached: function (detachedPanel) { 
       call_files/header.html(call_files/header.html().replace(" has been detached!", "")); 
      }, 
      parentSelector: null 
     }; 

     var secondstickyPanelOptions = { 
      topPadding: 150, 
      savePanelSpace: true, 
      onDetached: function (detachedPanel, spacerPanel) { 
       detachedPanel.html(detachedPanel.html() + " has been detached!"); 
       layout.css("background-color", "#ffffff"); 
      }, 
      onReAttached: function (detachedPanel) { 
       detachedPanel.html(detachedPanel.html().replace(" has been detached!", "")); 
      }, 
      parentSelector: null 
     }; 

     // multiple panel example (you could also use the class ".stickypanel" to select both) 
     $("#Panel1").stickyPanel(stickyPanelOptions); 

     $("#Panel2").stickyPanel(secondstickyPanelOptions); 

     $("#Panel3").stickyPanel(stickyPanelOptions); 

     $("#UnstickPanel3").click(function() { 
      $("#Panel3").stickyPanel("unstick"); 
     }); 

     stickyPanelOptions.parentSelector = "#AbsoluteDiv"; 
     $("#Panel4").stickyPanel(stickyPanelOptions); 

     stickyPanelOptions.parentSelector = "#NormalDiv"; 
     $("#Panel5").stickyPanel(stickyPanelOptions); 
    }); 
</script>

HTML

<div id="Panel1" class="stickyPanel"> 
<div class="headerBGdiv"> </div> 
<?php include('../call_files/pagesheader.html');?> 
</div> 


<div id="Panel2" class="stickyPanel"> 
<div id="navbar2"> 
    <ul id="tabs"> 
    <li><a href="#buyersguide">Buyer's Guide</a></li> 
    <li><a href="#restrictions">Export Restrictions</a></li> 
    <li><a href="#IR101">Infrared 101</a></li> 
    <li><a href="#whitepages">White Pages</a></li> 
    <li><a href="#terms">Terminology</a></li> 
    <li><a href="#news">Newsroom</a></li> 
    <li><a href="#gallery">Gallery</a></li> 
    </ul> 
</div> 
</div>

來源

2015-06-23 rogue_04_06

你使用了什麼庫？ [這一個]（https://github.com/donnyv/sticky-panel）？ – skobaljic

\t \t –

所有原始文件在這裏：https://github.com/donnyv/sticky-panel –

試一試它使用單獨的配置選項每個面板。

<script type="text/javascript"> 
    $().ready(function() { 
     var stickyPanelOptions = { 
      topPadding: 0, 
      savePanelSpace: true, 
      onDetached: function (detachedPanel, spacerPanel) { 
       call_files/header.html(call_files/header.html() + " has been detached!"); 
       css/header.css("background-color", "#1000ff"); 
      }, 
      secondStickyPanelOptions = stickyPanelOptions, 
      onReAttached: function (detachedPanel) { 
       call_files/header.html(call_files/header.html().replace(" has been detached!", "")); 
      }, 
      parentSelector: null 
     }; 

     secondStickyPanelOptions.topPadding = 100; 

     // multiple panel example (you could also use the class ".stickypanel" to select both) 
     $("#Panel1").stickyPanel(stickyPanelOptions); 

     $("#Panel2").stickyPanel(secondStickyPanelOptions); 

     $("#Panel3").stickyPanel(stickyPanelOptions); 

     $("#UnstickPanel3").click(function() { 
      $("#Panel3").stickyPanel("unstick"); 
     }); 

     stickyPanelOptions.parentSelector = "#AbsoluteDiv"; 
     $("#Panel4").stickyPanel(stickyPanelOptions); 

     stickyPanelOptions.parentSelector = "#NormalDiv"; 
     $("#Panel5").stickyPanel(stickyPanelOptions); 
    }); 
</script>

來源

2015-06-23 20:43:16

即使當我更改$（「＃Panel1」）時，它也不起作用。stickyPanel（secondStickyPanelOptions）;到$（「＃Panel2」）。stickyPanel（secondStickyPanelOptions）; –

如何添加一個變量到javascript粘性面板？

回答

相關問題