фиксированный позиционированный div следует за прокруткой

Question

Я делаю отзывчивое меню, и я хочу добавить хороший градиент в свое меню. Меню, которое я сделал с прокруткой на мобильных устройствах, но когда Im прокручивает страницу вниз, появляется градиент, но я хочу, чтобы он оставался в моем меню. Там есть 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