एक निश्चित ऊंचाई पर स्क्रॉलिंग से निश्चित पृष्ठभूमि छवि को रोकें

Question

जैसा कि नीचे दी गई तस्वीर में दिखाया गया है, साइडबार इसके रैपर से नीचे चला जाता है। यदि यह रैपर के नीचे जाता है तो मैं स्क्रॉलिंग से निश्चित पृष्ठभूमि छवि को कैसे रोकूं? मैं नहीं चाहता कि यह पाद लेख को छूएं।

<script> 
    $(function() { 

     //Sidebar navigation 

     var scrollNavTop = $('.scroll').offset().top; 


     $(window).scroll(function() { 
      if ($(window).scrollTop() > scrollNavTop) { 
      $('.scroll').css({ position: 'fixed', top: '0px' }); 
      } else { 

        $('.scroll').css({ position: 'relative', top: '0px' }); 

      } 

     }); 

    }); 
</script> 

एचटीएमएल कोड::

<div class="wrapper"> 

<%--  SMOOTH SCROLL--%> 
      <div class="scroll"> 
       <div style="margin:0 auto;"> 
      <div style="background-image:url(image/scrolltopNew.png); background-repeat:no-repeat; width:232px; height:97px; margin-left: 60px;"></div> 
        </div> 
       <div class="subpage-header"> 
        <div class="nav-section1"><a class="link" href="#section1"><p style="padding-left:50px;">COMPANY<br />BACKGROUND</p></a></div> 
        <div class="nav-section2"><a class="link" href="#section2"><p style="padding-left:50px;">COMPANY<br />VALUES</p></a></div> 
        <div class="nav-section3"><a class="link" href="#section3"><p style="padding-left:50px;">OUR<br />SERVICES</p></a></div> 
       </div> 
       <div style="margin:0 auto;"> 
       <div style="background-image:url(image/scrollbottomNew.png); background-repeat:no-repeat; width:232px; height:97px; margin-left: 60px;"></div> 
       </div> 
      </div> 

Answer 1

आप एक कंटेनर में सामग्री & अपने साइडबार नेविगेशन डालने और रिश्तेदार करने के लिए सामग्री की स्थिति को सेट करना होगा। आप स्क्रॉलिंग में मदद के लिए स्टिकम प्लगइन का उपयोग कर सकते हैं। एक उदाहरण इस प्रकार है:

एचटीएमएल -

<div class="container"> 
<div class="row stickem-container"> 
    <div class="content"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 

    <div class="aside stickem"> 
     I'm gonna be sticky! 
    </div> 
</div> 

सीएसएस -

.stickem-container { 
position: relative; 
} 

.stickit { 
margin-left: 660px; 
position: fixed; 
top: 0; 
} 

.stickit-end { 
bottom: 40px; 
position: absolute; 
right: 0; 
} 

जावास्क्रिप्ट -

<script src="jquery.js"></script> 
<script src="jquery.stickem.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.wrapper').stickem(); 
    }); 
</script> 

Answer 2

निरपेक्ष छवि बच्चे समाधान

यहाँ मेरी कोड हैं 210 यहां बताया गया है कि मैं इस समस्या को कैसे हल करूं:
सबसे पहले पृष्ठभूमि-छवि को उस सामग्री के अंदर सामान्य छवि के रूप में बदलें जिसे आप स्क्रॉल करना चाहते हैं।
फिर उसके माता-पिता के सापेक्ष स्थिति, और पूर्ण स्थिति बैनर (छवि)।
अब हम अपनी शीर्ष संपत्ति को प्रभावित करके इसकी स्क्रॉलिंग को नियंत्रित कर सकते हैं।
जावास्क्रिप्ट कोड जांचता है कि बैनर अपने मूल कंटेनर के अंदर है और जब स्क्रॉल उस कंटेनर से बाहर हो जाता है तो कोई और स्क्रॉलिंग नहीं जोड़ता है।

$(document).ready(function() { 
 
    $image = $('.image'); 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() < $(".content").height() - $image.height()) { 
 
     $image.css('top', $(window).scrollTop()); 
 
    } 
 
    }); 
 
});

body { 
 
    margin-left: 100px; 
 
} 
 
.content { 
 
    position: relative; 
 
    padding-left: 50px; 
 
    height: 1000px; 
 
    background-color: #999; 
 
    margin-bottom: 15px; 
 
} 
 
.end { 
 
    height: 100px; 
 
    background-color: black; 
 
} 
 
.image { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -30px; 
 
    width: 600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <p>Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, 
 
    Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, 
 
    Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,</p> 
 
    <svg class="image" viewBox="0 0 100 100"> 
 
    <path fill="blue" d="m0,10 5,-5 
 
      v80 
 
      l-10,-10" /> 
 
    <path fill="#07c" d="m0,10 35,5 
 
             c5,0 5,10 5,10 
 
             v40 
 
             c0,10 -5,10 -5,10 
 
             l-35,5Z" /> 
 

 
    </svg> 
 
</div> 
 
<footer class="end"> 
 

 
</footer>