jQuery - bu belli bir noktadan sonra kaydırılan bir kez konumunda bir unsur kalmak olun

Question

Aşağıdaki kod var: -

HTML

<div id="header"></div> 
<div id="content"> 
    <div class="sidebar-wrapper"></div> 
</div> 
<div class="sessions-wrapper"></div> 
<div id="footer"></div> 

CSS

#header { 
    height: 600px; 
    width: 100%; 
    background: black; 
} 
#content { 
    height: 2000px; 
    width: 100%; 
    background: #eeeeee; 
} 

.sidebar-wrapper { 
    width: 100%; 
    height: 350px; /*depends on content*/ 
    background: rgba(0,0,0,0.2); 
    border-radius: 20px; 
    padding: 20px; 
    margin-top: 50px; 
} 

.sessions-wrapper { 
    height: 200px; 
    width: 100%; 
    background: #000000; 
} 

#footer { 
    width: 100%; 
    height: 500px; 
    background: #888; 
} 

jQuery

o dibe ulaşana kadar sayfa aşağı sidebar-wrapper kaydırır sayfayı aşağı giderken anda

VIEW JSFIDDLE

jQuery.fn.scrollBottom = function() { 
    return jQuery(document).height() - this.scrollTop() - this.height(); 
}; 

var sidebar = jQuery('.sidebar-wrapper'); 
var pwindow = jQuery(window); 
var sessions = jQuery('.sessions-wrapper'); 
var sidebar_gap = sidebar.offset().top; 

pwindow.bind("scroll resize", function() { 
    var gap = pwindow.height() - sidebar.height() - 10; 
    var sessions_gap = sessions.offset().top - sidebar.offset().top; 
    var visibleFoot = 172 - pwindow.scrollBottom(); 
    var scrollTop = pwindow.scrollTop() 

    if(scrollTop > sidebar_gap - 140 && sessions_gap > 750 && visibleFoot < -850) { 
     sidebar.css({ 
      'position': 'fixed', 
      'top': '100px', 
      'width': '100%' 
     }); 
    } else if (sessions_gap < 750 && visibleFoot > -850) { 
     sidebar.css({ 
      'position': 'static', 
      'top': '0px', 
      'width': '100%' 
     }); 
    } else { 
     sidebar.css({ 
      'position': 'static', 
      'top': '0px', 
      'width': '100%' 
     }); 
    } 
}); 

. sidebar-wrapper yerine orijinal konumuna geri dönerken, bu elemanın kaybolduğu yerde kalmasını ve sayfanın arkasına dönerken ilerlemesini istiyorum. Ben eğer önceden

Teşekkürler (her sayfada farklı olurdu böylece elemanların yükseklikleri) burayı aynı elementler ancak farklı içeriğe sahip farklı sayfalardaki çalışmak için bu fonksiyonu olarak bu şekilde yapıyorum

Belirsiz kaldım, lütfen bana bildirin.

Answer 1

Bu komut Ne istediğine yapar düşünüyorum:

<script type='text/javascript'> 
    jQuery.fn.scrollBottom = function() { 
    console.log('scrollBottom'); 
    return jQuery(document).height() - this.scrollTop() - this.height(); 
}; 

var sidebar = jQuery('.sidebar-wrapper'); 
var pwindow = jQuery(window); 
var sessions = jQuery('.sessions-wrapper'); 
var sidebar_gap = sidebar.offset().top; 

var content = $('#content'); 

// original sidebar position 
var original_sidebar_top = sidebar.position().top;  
var desired_offset = 140; 
var separation = 20; 

pwindow.bind('scroll resize', function() { 
    // sidebar & header height 
    var sb_height = sidebar.height();   
    var header_height = $('#header').height(); 
    var scrollTop = pwindow.scrollTop();   

    // compute the real offset in screen (not the document) 
    var screen_offset_ss = sessions.offset().top - scrollTop;   
    var distance = desired_offset+sb_height+separation; 

    // there's space for the sidebar 
    if (distance < screen_offset_ss) { 
     // header is not showing, fix sidebar position 
     if (scrollTop > header_height-desired_offset) { 
      console.log('fixed'); 
      sidebar.css({ 
       'position': 'fixed', 
       'top': desired_offset+'px' 
      }); 
     } 
     // header is showing, return sidebar to original position 
     else { 
      console.log('static'); 
      sidebar.css({ 
       'position': 'static', 
       'top': original_sidebar_top+'px' 
      });     
     } 
    } 

    // there's no space for the sidebar 
    else { 
     console.log('20px'); 
     sidebar.css({ 
      'position': 'relative',     
      // place the sidebar right above the sessions (with separation) 
      'top': sessions.offset().top - content.position().top - sb_height - separation 
     }); 
    } 
}); 
</script> 

İşte JSFiddle bu.

Lütfen, CSS'de yaptığım değişikliği not alın. Bir soruna neden oldu (yanıp sönüyor). Hala marjı istiyorsanız

.sidebar-wrapper { 
    width: 100%; 
    height: 350px; /*depends on content*/ 
    background: rgba(0,0,0,0.2); 
    border-radius: 20px; 
    /*padding: 20px;   commented*/ 
    /*margin-top: 50px;  commented*/ 
} 

, o kadar iyi de başka bir yerde bunu yapar, ben yanıp fark ettim #content

Answer 2

bu deneyin:

if(scrollTop > 500 && sessions_gap > 750 && visibleFoot < -850) { 
     sidebar.css({ 
      'position': 'fixed', 
      'top': '100px', 
      'width': '100%' 
     }); 
    } else if (scrollTop > 500 && sessions_gap > 750 && visibleFoot >= -850) { 
     sidebar.css({ 
      'position': 'relative', 
      'top': (gap+700)+'px', 
      'width': '100%' 
     }); 
    } else { 
     sidebar.css({ 
      'position': 'static', 
      'top': '0px', 
      'width': '100%' 
     }); 
    } 

Nedenini bilmiyorum ama başka bir yerde aynı yapacak eğer JSFiddle div yanıp sönme, bilmiyorum.