导航箭头始终在滚动上可见

Question

所以我有一个网站，内容在幻灯片上。

导航箭头始终位于幻灯片的50％高度。发生的事情是，当滑块变大时，很难导航滑块。

您可以在此处查看网站：

http://tentzone.pt/

问题出在第4张幻灯片上。我该怎么做，所以滚动时箭头总是可见的？

箭头的当前css在哪里：

    .content .nav {
    width: 40px;
    height: 100px;
    margin: 5px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    right: 0;
    z-index: 3;
    background: url(../img/navigation.png) no-repeat 0 0 transparent;
    opacity: 0.5;
    cursor: pointer;
}
.content .nav:hover {
    opacity: 1;
}
.content .nav.prev {
    left: 0;
    right: none;
}
.content .nav.next {
    background-position: 100% 0;
}

Answer 1

将position更改为fixed

.content .nav {
    width: 40px;
    height: 100px;
    margin: 5px;
    cursor: pointer;
    position: fixed;
    top: 50%;
    margin-top: -50px;
    right: 18%;
    z-index: 3;
    background: url(../img/navigation.png) no-repeat 0 0 transparent;
    opacity: 0.5;
    cursor: pointer;
}
.content .nav:hover {
    opacity: 1;
}
.content .nav.prev {
    left: 18%;
    right: none;
}