我该如何重新定位这个淡入淡出来把它放在正确的位置

Question

我有一个简单的2面板布局，其中左侧面板滚动，右侧面板不滚动。我想在滚动div的右侧添加一个淡入淡出效果，但是到目前为止，我已经获得了淡入淡出效果，see here，或者它是静态的，但是在目标区域like this之外。

我需要做什么不同才能使淡入淡出到正确的位置？

html, 
body, 
.row, 
.row > div { 
    height: 100%; 
} 
.content:before { 
    content: ""; 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 5%; 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,b7b7b7+100&0+0,0.65+100 */ 
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(183, 183, 183, 0.65) 100%); 
    /* FF3.6-15 */ 
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(183, 183, 183, 0.65) 100%); 
    /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(183, 183, 183, 0.65) 100%); 
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6b7b7b7', GradientType=1); 
    /* IE6-9 */ 
} 
.content { 
    overflow-y: auto; 
} 
.bar { 
    background-color: red; 
} 

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="row"> 

    <div class="col-sm-3 col-sm-push-9 bar clearfix"> 
    Menu 
    </div> 


    <div class="col-sm-9 col-sm-pull-3 content"> 
    Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br />Content 
    <br /> 
    </div> 

</div> 

Answer 1

这就是我想出了：

1. 使用fixed定位
2. 通过引导的课程设置right到25.5%一列的比例匹配到其他
3. Add @media查询处理较小的屏幕尺寸设置right回0

FIDDLE