Как добавить переменную в javascript липкую панель?

Question

Возможно, это может быть убито, но это работает. Я скопировал первую переменную целиком и дал ей новое имя. Кроме того, он деинсталлировал его из файлов call_files/header.html и css/header.css. Вместо этого я связал его с layout.css, который определяет внешний вид второго меню. Я уверен, что есть способ потоковой передачи.

<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> 

Answer 1

Попробуйте это использует отдельные параметры конфигурации для каждой панели.

<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>