Question

我想在滚动时用另一个导航菜单替换我的导航菜单，并将新的导航菜单粘贴在页面顶部。

对于粘性菜单部分，我使用了这个JavaScript代码：

 // Create a clone of the menu, right next to original.
$('.panel_menu').addClass('original').clone().insertAfter('.panel_menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);

function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {

    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');  
    $(".cloned").css('background-color', '#2f3a54');


  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();

    $('.original').css('visibility','visible');     
  }
};

但我不知道如何执行更换部件..谢谢

编辑（答案）：所以我稍微修改了KLAJDI的答案，这里是代码：

$(function(){
     // Check the initial Poistion of the Sticky Header
     var stickyHeaderTop = $('.panel_menu').offset().top;

     $(window).scroll(function(){
             if( $(window).scrollTop() > stickyHeaderTop ) {
                     orgElement = $('.panel_menu');
                     widthOrgElement = orgElement.css('width');
                     $('.panel_menu_clone').css({position: 'fixed', top: '0px'});
                     $('.panel_menu_clone').css('width',widthOrgElement).show();
                     $(".panel_menu_clone").css('background-color', '#2f3a54');  
             } else {
                     $('.panel_menu').show();
                     $('.panel_menu_clone').css('display', 'none');
             }
     });
});

Answer 1

你的意思是这样的：

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;
 
        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

        table { background: black; color: white;}
                body, td {
                        font: 13px sans-serif;
                }
                #stickyheader {
                        width: 100%;
                        height: 10px;
                }
                #stickyalias {
                  display: none;
                  height: 10px;
                }
                #unstickyheader {
                  margin-bottom: 15px;
                }
                #othercontent {
                  margin-top: 20px;
                }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="unstickyheader">
    <p>This is some text that comes before our <strong>Sticky
    Header</strong></p>
  </div>
 
  <div id="stickyheader">
    <table width="100%">
      <tr>
        <td>Sticky Text 1</td>
 
        <td>Sticky Text 2</td>
 
        <td>Sticky Text 3</td>
 
        <td>Sticky Text 4</td>
 
        <td>Sticky Text 5</td>
      </tr>
    </table>
  </div>
 
  <div id="stickyalias"></div>
 
  <div id="othercontent">
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
    <p>Content Here<p>
  </div>

更换菜单并将其粘贴到滚动顶部

1 个答案: