【发布时间】：2017-04-18 05:55:50
【问题描述】：
我是这个网站和一般 Web 开发的新手，但我正在做一个需要一些帮助的项目。请多多包涵，因为我还是新手，所以我知道我的代码很草率而且可能效率低下。
我正在制作一个粘性标题，当您向下滚动页面时该标题将保持可见。此外，当您单击链接时，我希望它们被突出显示，然后通过滚动操作移动到页面上的特定位置。当您点击 1 时，它应该会突出显示，而其他应该是灰色的。
由于我使用独特的形状来执行此操作，因此我只使用了图像。我不知道更好，所以如果您有建议，将不胜感激。但是，这不是我向你们提出问题的重点。我已经想出了如何利用堆栈溢出的知识库来使标头工作。但是，我需要优化元素，使其能够响应较小的视口。鉴于我有多个 div、图像和脚本，我不确定如何执行此操作。每次我尝试完成此操作时，我都会破坏标头功能的其他方面。任何帮助或方向将不胜感激。我什至不知道从哪里开始。
$(document).ready(function() {
$('div[id^="section"]').on('click', function() {
$('div[id^="section"]').addClass('not-active');
$(this).removeClass('not-active');
});
});
var $window = $(window),
$stickyEl = $('.fusion-page-title-bar'),
elTop = $stickyEl.offset().top;
$window.scroll(function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 225
}, 1000);
return false;
}
}
});.fusion-page-title-bar {
background-color: rgba(77,77,77,0.6) !important;
z-index: 9999 !important;
position: sticky !important;
position: -webkit-sticky !important;
position: -moz-sticky !important;
position: -ms-sticky !important;
position: -o-sticky !important;
top: 135px !important;
height: 71px;
border: none;
}
}
.fusion-page-title-bar.sticky{
position: fixed;
top: 0;
}
#main{padding-top:0px !important;}
.stickybanner {
height: 71px;
text-align:center !important;
width:1596px !important;
position:relative !important;
margin:auto !important;
background-color:gray;
}
[id^="section"] {
position: absolute;
display: inline;
}
[id^="section"] img:last-child {
display: none;
}
[id^="section"].not-active img:last-child {
display: block;
}
[id^="section"].not-active img:first-child {
display: none;
}
#section1 {
left: 26px;
position:absolute !important;
}
#section2 {
left: 325px;
position:absolute !important;
}
#section3 {
left: 624px;
position:absolute !important;
}
#section4 {
left: 923px;
position:absolute !important;
}
#section5 {
left: 1222px;
position:absolute !important;
}
.hidecode{display:none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stickybanner">
<a href="#sections1">
<div id="section1">
<img src="http://imgur.com/A3hv0f3.png">
<img src="http://imgur.com/iQv7yhd.png">
</div>
</a>
<a href="#sections2">
<div id="section2">
<img src="http://imgur.com/Ld1TntV.png">
<img src="http://imgur.com/oziGN60.png">
</div>
</a>
<a href="#sections3">
<div id="section3">
<img src="http://imgur.com/zpViBoy.png">
<img src="http://imgur.com/f5wSB6N.png">
</div>
</a>
<a href="#sections4">
<div id="section4">
<img src="http://imgur.com/hgt5u84.png">
<img src="http://imgur.com/Skhrull.png">
</div></a>
<a href="#sections5">
<div id="section5">
<img src="http://imgur.com/iOThUy8.png">
<img src="http://imgur.com/lLRbfvT.png">
</div></a>
</div>【问题讨论】：
-
您可以使用引导框架进行响应。getbootstrap.com/getting-started
标签： javascript jquery html css responsive-design