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>

我想在向下滚动（＆gt; 100px）时将徽标（http://1.bp.blogspot.com/-Gl1C_jIZzzw/VitZSSDKfAI/AAAAAAAAH1M/UXQQKPV5XTU/s1600-r/2.png）固定到＆＃34; Home＆＃34;位置。

这意味着我们有：

 <li><a class="thome" href="#"><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></li>

我还希望在向上滚动时返回原始徽标，菜单（＆lt; 100px）。

我已经习惯但我不知道该怎么做：

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

感谢您的帮助。

Answer 1

试试这个Javascript代码：

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

如果您向下滚动超过100px，这将用li.thome图像替换#Header1_headerimg元素的内容。

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

向下滚动时将大徽标标题固定到菜单中

1 个答案: