0
我对这个网站和一般的网站开发并不熟悉，但是我正在开发一个项目，我需要一些帮助。请耐心等待，因为我仍然对此感到陌生，所以我明白我的代码sl and不驯，可能效率低下。如何让多个内联图像响应？
我正在使用粘性标题，当您向下滚动页面时，它将保持可见状态。另外，当你点击链接时，我希望它们被突出显示，然后通过滚动操作移动到页面上的特定位置。当你点击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>
您可以使用引导框架来实现响应.. http://getbootstrap.com/getting-started/ – SilentCoder