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>

如何将变量添加到javascript粘性面板？

1 个答案: