使固定的div滚动随页面滚动。 （平方空间）

Question

我正在尝试在左上角创建横幅，该横幅保持原状，并且在窗口缩小时不会消失或被截断。该站点是indigolubricants.com，可以使用密码indigodenver进行访问。这是一个Squarespace网站，某些行为与常规html和css不同。 HTML： <div class="corner-ribbon top-left sticky red shadow">Hover over symbols to see product categories</div>

这是位置固定的CSS。问题是我希望功能区与页面的其余部分一起滚动。请让我知道任何解决方案。 CSS或JavaScript。我已经尝试过更改位置属性。如果元素是绝对的，那么我将无法移动它。调整页面大小时，其他元素将被截断。 CSS：

/* The ribbons */
.corner-ribbon{
    width: 1000px;
    background: #DAA520;
    position:fixed;
    top: 0px;
    left: 100px;
    text-align: center;
    line-height: 50px;
    letter-spacing: 1px;
    color: #f0f0f0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.corner-ribbon.shadow{
    box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/* Different positions */
.corner-ribbon.top-left{
    top: 200px;
    left: -300px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

Answer 1

尝试将这些样式应用于要修复的元素。您可以相应地更改高度和宽度。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
   <input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
   <input type="checkbox" name="vehicle" id="vehicle3" value="three">three<br>
   <input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
   <input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
   <input type="checkbox" name="vehicle" id="all" value="all">all<br>