2017-07-09 13 views
0

Ich möchte mein Navigationsmenü durch ein anderes auf Scroll ersetzen und das neue auf der Oberseite der Seite.ersetzen Sie das Menü und kleben Sie es oben auf Scroll

Für das klebrige Menü Teil I dieses JavaScript-Code verwendet:

// 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');  
    } 
}; 

aber ich weiß nicht, wie das Ersatzteil auszuführen .. danke

Edit (Antwort): Also ich leicht modifiziert, um die Antwort von Klajdi und hier ist der Code:

$(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'); 
      } 
    }); 
}); 

Antwort

0

bedeuten Sie etw wie folgt aus:

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

Verwandte Themen