Question

我制作了一个响应式菜单，我想在菜单中添加一个漂亮的渐变。菜单我在移动设备上滚动，但是当我向下滚动页面时，渐变跟随，但我希望它保留在我的菜单上。那里是JSFiddle，你可以在那里看到它。

这是我的渐变CSS

#page .page-nav .controls:after{
    content: '';
    width: 200px;
    height: 38px;
    position: fixed;
    right: 0;
    background: -webkit-linear-gradient(left ,transparent -0px, red);
    z-index: 100;
}

有此解决方案吗？

Answer 1

你的背景是错误的元素并且它是固定的，这就是它保持原样的原因。

将您的背景放在.page-nav上，然后移除after上的.controls

CSS将是：

#page .page-nav{
background: -webkit-linear-gradient(left ,transparent -0px, red);
background-size: 200px 38px;
background-repeat: no-repeat;
background-position: right;
position:relative;
}

$('<span class="previous"></span>').prependTo("#page .page-nav .menu-controls");
$('<span class="next"></span>').appendTo("#page .page-nav .menu-controls");

$(".previous").click(function(){
     var posLeft = $(".page-nav").scrollLeft();
  $(".page-nav").animate({scrollLeft: posLeft - 200}, 500);

});
$(".next").click(function(){
     var posLeft = $(".page-nav").scrollLeft();
  $(".page-nav").animate({scrollLeft: posLeft + 200}, 500);
});

@import url('https://fonts.googleapis.com/css?family=Roboto:100');
a{text-decoration:none;}

#page{
  position:relative;
  font-family:"Roboto";
  font-weight:100;
  font-size:13px;
  position:relative;
}

#page .container{
  width:100%;
  height:1000px;
  margin-top:20px;
  background:white;
}

#page .page-nav{
    background: -webkit-linear-gradient(left ,transparent -0px, red);
    background-size: 200px 38px;
    background-repeat: no-repeat;
    background-position: right;
    position:relative;
}

#page .page-nav::-webkit-scrollbar{-webkit-appearance: none;background: transparent;width:0;height:0;}

#page .page-nav .items{
    display: table;
    margin: 0 auto;
}

#page .page-nav .menu-controls{
    position: absolute;
    top: 0;
}

#page .page-nav .controls{
    position: relative;
}

#page .page-nav .item{
    display: inline-block;
}

#page .page-nav .item a{
    color:#333333;
    display: block;
    padding: 6px 15px;
}

#page .page-nav .item.current a{
    color: #0099ff;
}

#page .page-nav span {
    background-image: url("http://www.hotel-hlosnarcisos.com/joomla/components/com_jhotelreservation/assets/t/img/arrow_right.gif");
    background-repeat: no-repeat;
    background-size: 12px;
    height: 15px;
    width: 28px;
    display: none;
    top: 21px;
    position: fixed;
    z-index: 9999;
    cursor: pointer;
}

#page .page-nav span.previous {transform: rotate(180deg);left: 0;top: 20px;}

#page .page-nav span.next {transform: rotate(360deg);right: 0;}

@media screen and (max-width: 864px) {
    #page .page-nav{border: 1px solid #dedede;border-left: none;border-right: none;white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar;padding-left:15px;padding-right:25px}
    #page .page-nav .items{padding-right: 250px}
    #page .page-nav .controls:after{content: '';}
    #page .page-nav .item a{padding: 10px 15px;font-size: 13px}
    #page .page-nav span {display: inline-block;}
}

<div id="page">
  <div class="page-nav">
        <div class="items">
            <div class="item"><a href="">Menu item 1</a></div>
            <div class="item"><a href="">Menu item 2</a></div>
            <div class="item"><a href="">Menu item 3</a></div>
            <div class="item"><a href="">Menu item 4</a></div>
            <div class="item"><a href="">Menu item 5</a></div>
            <div class="item current"><a href="">Menu item 6</a></div>
            <div class="item"><a href="">Menu item 7</a></div>
            <div class="item"><a href="">Menu item 8</a></div>
            <div class="item"><a href="">Menu item 9</a></div>
        </div>
        
        <div class="menu-controls">
            <div class="controls">
            </div>
        </div>
    </div>
    
    <div class="container">
      SCROLL DOWN TO SEE, HOW RED GRADIENT FOLLOWS
    </div>
</div>

JSFiddle

固定定位div跟随滚动

1 个答案: