Question

我是这个网站和Web开发的新手，但我正在开展一个项目，我需要一些帮助。请耐心等待我，因为我还是新手，所以我理解我的代码很草率，可能效率低下。

我正在处理一个粘性标题，当您向下滚动页面时它将保持可见状态。此外，当您单击链接时，我希望它们突出显示，然后通过滚动操作移动到页面上的特定位置。单击1时，应突出显示，其他颜色应为灰色。

由于我使用独特的形状来执行此操作，因此我只使用了图像。我不知道更好，所以如果你有任何建议，我将不胜感激。但是，这不是我向大家提出的问题。我已经找到了如何通过利用堆栈溢出的知识库来使头文件工作。但是，我需要优化元素，以便它能够响应较小的视口。鉴于我有多个div，图像和脚本，我不确定如何做到这一点。每次我尝试完成此操作时，我都会破坏标题功能的其他方面。任何帮助或方向将不胜感激。我甚至不知道从哪里开始。

JSFiddle Demo

$(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>

Answer 1

您可以使用CSS来制作箭头形状的元素。它将为您提供更多的灵活性和功能，并且可以重复使用和管理。

我已经制作了一个JSFiddle描述你如何制作一个箭头形状的div，你需要的那种。您可以进一步调整它以实现您想要的目标。

https://jsfiddle.net/mzo5mqz2/

* {
	margin: 0;
	padding: 0;
}
/*Header full width*/
.header{
	width: 100%;
	position: fixed;
}
/*Common CSS to display tab shape*/
.header__tab{
    min-width: 250px;
    width: calc(20% - 20px);
    line-height: 50px;
    position: relative;
    text-align: center;
    margin: 50px auto;
    display: inline-block;
}
.header__tab:after, .header__tab:before{
    content:"";
    position:absolute;
    width:20px;
    height:50%;
    left:100%;
}
.header__tab--left__before, .header__tab--left__after {
	content: "";
    position: absolute;
    width: 20px;
    height: 50%;
    left: -20px;
}
/*Color for Tab 1*/
.tab1 {
	background: red;
}
.tab1:after{
    bottom:0;
    background: linear-gradient(to right bottom, red 50%, transparent 50%);
}
.tab1:before{
    top:0;
    background: linear-gradient(to right top, red 50%, transparent 50%);
}
.tab1--before {
	top: 0;
    background: linear-gradient(to right top, transparent 50%, red 50%);
}
.tab1--after {
	bottom: 0;
    background: linear-gradient(to right bottom, transparent 50%, red 50%);
}

/*Color for Tab 2*/
.tab2 {
	background: yellow;
}
.tab2:after{
    bottom:0;
    background: linear-gradient(to right bottom, yellow 50%, transparent 50%);
}
.tab2:before{
    top:0;
    background: linear-gradient(to right top, yellow 50%, transparent 50%);
}
.tab2--before {
	top: 0;
    background: linear-gradient(to right top, transparent 50%, yellow 50%);
}
.tab2--after {
	bottom: 0;
    background: linear-gradient(to right bottom, transparent 50%, yellow 50%);
}

<div class="header">
  <div class="header__tab tab1">
    <span class="header__tab--left__before tab1--before"></span>
    <span class="header__tab--left__after tab1--after"></span>
    <span>DOCUMENTATION&nbsp;ACCURACY</span>
  </div>
  <div class="header__tab tab2">
    <span class="header__tab--left__before tab2--before"></span>
    <span class="header__tab--left__after tab2--after"></span>
    <span>CODING&nbsp;EFFICIENCY</span>
  </div>
</div>

网络开发提示： - 在开始时投入一点额外时间，最后您将拥有最灵活的网络应用程序，这将使您能够根据需要快速更改界面。对于ex-在这种情况下，如果您在一段时间后不再喜欢它，您可以轻松更改选项卡的颜色或形状。

Answer 2

在你的css中添加这种风格

img{width:100%;}

您可以获取所有设备的响应式图像。

Answer 3

您只需使用Bootstrap img-responsive class

即可

对于对齐，您可以使用班级col-md-2（从0到12）

这是一个基于您的代码的示例：

<div class="col-md-2">
        <a href="#sections2">
            <div id="section2">
                <img class="img-responsive"  src="~/IMG/PNG_transparency_demonstration_1.png" />
                <img class="img-responsive"  src="~/IMG/PNG_transparency_demonstration_1.png" />
            </div>
        </a>
    </div>

如何使多个内嵌图像响应？

3 个答案: