如何在視口到達中間位置時修復div位置？

我有參考圖像附加描述。如圖中它有兩個並排的部分。一個是圖像（手機和平板電腦），第二個是功能。這整個部分是在摺疊之下。如何在視口到達中間位置時修復div位置？

現在，當用戶滾動查看它，當圖像到達垂直視口的中間時，它的位置應該保持固定。雖然其位置是固定的，但功能應該像正常情況一樣滾動。一個功能從視口圖像應該改變。當所有功能都不在視口中時，圖像的位置應該再次變爲靜態。

我使用skrollr JS插件this.Please幫助...

下面是代碼

.featurenav { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
} 
 
.featurenav li:before { 
 
    content: url('../images/point.png'); 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 5px 
 
} 
 
.featurenav li { 
 
    font-family: OpenSans-Light; 
 
    color: #838b80; 
 
    font-size: 30px; 
 
    margin-bottom: 90px; 
 
    padding-left: 83px; 
 
    position: relative; 
 
} 
 
.color { 
 
    float: left; 
 
    width: 74px; 
 
    height: 74px; 
 
    margin: 30px 25px 0px 0px; 
 
    border-radius: 5px; 
 
} 
 
.color1 { 
 
    background-color: #c9bda3; 
 
} 
 
.color2 { 
 
    background-color: #c99a32; 
 
} 
 
.color3 { 
 
    background-color: #838b80; 
 
} 
 
.color4 { 
 
    background-color: #fff; 
 
} 
 
.showcase img { 
 
    width: 100%; 
 
} 
 
.showcase img:not(:first-child) { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12 padding-zero"> 
 
    <div class="col-sm-6"> 
 
    <ul class="featurenav"> 
 
     <li class="firstli">Graphical Layout</li> 
 
     <li class="secondli">Open sans Font Used</li> 
 
     <li class="thirdli">Colors Used 
 
     <br> 
 
     <div class="color color1"></div> 
 
     <div class="color color2"></div> 
 
     <div class="color color3"></div> 
 
     <div class="color color4"></div> 
 
     <div class="clearfix"></div> 
 
     </li> 
 
     <li class="fourthli">Parallax Smooth Scrolling</li> 
 
     <li class="fifthli">Adaptable</li> 
 
    </ul> 
 
    </div> 
 
    <div class="col-sm-6 showcase"> 
 
    <img src="images/mobile_tablet.png" data-bottom-top="display:block" alt="showcase" data-anchor-target=".firstli" /> 
 
    <img src="images/mobile_tablet_2.png" alt="showcase" /> 
 
    <img src="images/mobile_tablet_3.png" alt="showcase" /> 
 
    <img src="images/mobile_tablet_4.png" alt="showcase" /> 
 
    <img src="images/mobile_tablet_5.png" alt="showcase" /> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
</div>

來源

2017-01-23 Shashank Bhatt

哪裏是你的代碼？ –

更新了代碼 –

航點信息庫對於這類事情非常有用。 http://imakewebthings.com/waypoints/ – cpk

您的圖片不能正常工作，所以這是一個通用的解決方案。所有你需要做的是元素更改爲position: fixed;當您滾動到哪裏圖像是減去一半的瀏覽器窗口的高度

$(window).on('load', function() { 
 
    $affix = $('#affix'); 
 
    $affix.attr('data-affix', $affix.offset().top); 
 
}).on('scroll', function() { 
 
    var scrolled = $(window).scrollTop(), 
 
    vh = $(window).height(), 
 
    halfView = (vh/2), 
 
    scrollPoint = $affix.attr('data-affix') - halfView; 
 
    if (scrolled >= scrollPoint) { 
 
    $('img').addClass('fixed'); 
 
    } else { 
 
    $('img').removeClass('fixed'); 
 
    } 
 
});

* {margin:0;} 
 
section { 
 
    height: 500vh; 
 
} 
 
img { 
 
    max-width: 600px; 
 
    width: 100%; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section></section> 
 
<section><img id="affix" src="http://plusquotes.com/images/quotes-img/cool_cat.jpg" data-affix></section>

來源

2017-01-23 16:45:31

如何在視口到達中間位置時修復div位置？

回答

相關問題