0
私はこのサイトとウェブ開発の新人ですが、私は少しの助けが必要なプロジェクトに取り組んでいます。私はまだこれに新しいですので、私と一緒に抱いてください私は私のコードがたるんで、おそらく非効率であることを理解してください。複数のインライン画像を反応させるにはどうすればよいですか？
ページを下にスクロールすると表示されている固定ヘッダーに取り組んでいます。さらに、リンクをクリックすると、そのリンクを強調表示してからスクロール操作でページ上の特定の場所に移動します。 1をクリックすると強調表示され、他はグレー表示になります。
私はこれを行うためにユニークな形を使用しているので、私は単に画像を使用しました。私はあなたが提案を持っているなら、それは非常に高く評価されるだろうので、より良いことを知らない。しかし、これは皆さんにとって私の質問のポイントではありません。スタックオーバーフローに関するナレッジベースを利用してヘッダを作成する方法をすでに理解しています。しかし、小さなビューポートに対応するように要素を最適化する必要があります。私は複数の部門、画像、スクリプトを持っているので、これをどうやって行うのかは不明です。私がこれを達成しようとするたびに、ヘッダーの機能のいくつかの他の側面が破られます。どんな助けや方向性も高く評価されます。私はここでどこから始めるべきか分からない。
$(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