向下滚动时将大徽标标头插入菜单

Question

我有一个HTML标志头:

<div id="header-inner">
    <a href="#" style="display: block">
        <img alt="Zalaro" height="90px;" id="Header1_headerimg" src="http://1.bp.blogspot.com/-Gl1C_jIZzzw/VitZSSDKfAI/AAAAAAAAH1M/UXQQKPV5XTU/s1600-r/2.png" style="display: block" width="270px; "/>
    </a>
</div>

菜单:

和

   <ul>
        <li><a class="thome" href="#">Home</a></li>
        <li><a href="#">Models</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">About</a></li>
    </ul>

我想在向下滚动(>100px)到"Home"位置时固定徽标(http://1.bp.blogspot.com/-Gl1C_jIZzzw/VitZSSDKfAI/AAAAAAAAH1M/UXQQKPV5XTU/s1600-r/2.png)。

这意味着我们有:

 <li><a class="thome" href="#"><img alt="Zalaro" height="90px;" id="Header1_headerimg" src="https://i.stack.imgur.com/pvfCJ.png" style="display: block" width="270px; "/></a></li>

我还想在滚动时返回原始徽标，菜单(<100px)。

我用过但不知道怎么做:

var num = 100; 
$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num ) {
    }
    else{
   }
});

谢谢你的帮助。

Answer 1

试试这个Javascript-Code:

$(document).ready(function() {
    var num = 100;
    var home = $('.thome');
    var homeContent = home.html(); //save the current htmlContent of .thome
    var image = $('#Header1_headerimg');
    $(window).bind('scroll', function () {
        if ($(window).scrollTop() > num ) {
            //Clone the Image and insert it into the .thome class
            home.html(image.clone());
        } else {
            //Replace the content of .thome with the "Home"-Text
            $(".thome").html(homeContent);
        }
    });
});

这将取代li.thome元素的内容与#Header1_headerimg图像，如果你进一步向下滚动超过100px。

li.thome的正常内容保存在homeContent变量中，如果再次滚动到顶部，将重置