fest positionierte div folgt Scrollen

Question

Ich mache ein responsives Menü, und ich möchte einen schönen Farbverlauf zu meinem Menü hinzufügen. Menü, das ich mit Scrollen auf mobilen Geräten gemacht habe, aber wenn ich eine Seite nach unten scrolle, folgt Gradient, aber ich möchte, dass es auf meinem Menü bleibt. Es gibt JSFiddle, wo Sie es sehen können.

Dies ist mein Gradient 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; 
} 

Alle Lösungen mit diesem?

Answer 1

Ihr Hintergrund ist auf dem falschen Element und es ist behoben, deshalb bleibt es wo es ist.

Setzen Sie Ihren Hintergrund auf dem .page-nav und entfernen Sie die after auf .controls

Die CSS wäre:

#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