Question

我有一个固定在75px的标题。在75px我希望它过渡并在其上有一个标志。

例如;

标准它说：立即致电促销活动！ 888.963.8863
我需要75px :(我的LOGO）立即致电促销活动！ 888.963.8863

这是测试页面： http://www.securemyhome.com/test-pulse2

使用Javascript：

var num = 75; //number of pixels before modifying styles

$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
    $('.navscroll').addClass('fixed');
} else {
    $('.navscroll').removeClass('fixed');
}
});

CSS：

.navscroll {
position: absolute;
width: 100%;

}

.fixed {
 position: fixed;
 top: 0px;
 width: 100%;
 }

#fronttitle {
background-image: linear-gradient(rgb(255, 194, 15) 0%, rgb(248,208, 111) 100%);
box-shadow: 0px 1px 12px rgba(0,0,0,0.6);
}

#page-title {
display: block;
position: relative;
z-index: 20;
}

我想要出现的徽标： http://www.securemyhome.com/img/nav_authorized.png

谢谢！

Answer 1

我能想到的一种方法是将图像放在标题中，但将其css设置为display：none;

然后它将不可见，然后当您使用javascript添加固定类时。然后将图像设置为可见。

CSS：

.img-id-for-header {
    display:none;
}

使用Javascript：

var num = 75; //number of pixels before modifying styles

$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
    $('.navscroll').addClass('fixed');
    $('.img-id-for-header').show();
} else {
    $('.navscroll').removeClass('fixed');
    $('.img-id-for-header').hide();
}
});

在滚动时将图像添加到固定标题

1 个答案: