使用单选按钮转换

Question

我找到了this tutorial，它引入了我的页面所需的转换，只需单击一下单选按钮即可将其向下滑动。

我的想法是，我的页面的 width 和 height 是 100% 并且每次点击都会使用 translateY 将页面“移出画布”（位于 tyyli.css 第 663 行），就像在教程中一样提供。

经过所有努力，如果我将第一个单选按钮放在 st-scroll div 中，我无法让它工作。我必须把它直接放在site-wrapper 下才能让它工作，但现在看起来很糟糕，因为它不会随着页面移动而只是隐藏在st-scroll 下。此外，放在st-scroll DIV 之外的点也会导致整个页面比应有的低 100 像素。

这是顶部的单选按钮。

<input type="radio" name="radio-set" id="st-control-1"/>
<a href="#st-panel-1" class="arrow-down up"></a>

尝试将此代码从第一个 <secton> 移动到 site-wrapper 下方，像这样

<div class="menu">
    <a href="#" class="button i"></a>
    <a href="http://facebook.com/Kadnnn" target="_blank" class="button f"></a>
    <a href="mailto:mymail@mymail.fi" class="button e"></a>
</div>
/*TRY TO PUT IT JUST BELOW THIS LINE AND SEE THE PROBLEM*/
<input type="radio" name="radio-set" id="st-control-1"/>
<a href="#st-panel-1" class="arrow-down up"></a>
<div class="st-scroll">

你会发现问题。我的想法是，这与 Z-index 有关，但我可能错了。我想将两个按钮都放在 st-scroll 中。

我的网站是www.kasperikoski.fi

Answer 1

您可以使用标签来控制单选按钮，这样您就可以将标签放在您想要的任何位置，并更好地控制它们的样式，以及隐藏单选按钮。但是，如果您想使用 ~ 或 + 组合器，则无线电必须是您要控制的元素的兄弟元素或它的祖先之一。

演示

.st-scroll {
  padding: 1em;
  background-color: tomato;
  transition: transform 500ms ease;
}

input[name="radio-set"] {
  display: none;
}

label {
  display: block;
  margin-bottom: 0.5em;
  padding: 1em;
  background-color: lightgray;
  border: solid 1px gray;
  border-radius: 0.5em;
}

input[type="radio"] + label {
  display: inline-block;
}

#st-control-1 ~ .st-scroll {
  transform: translateY(100%);
}

#st-control-1:checked ~ .st-scroll {
  transform: translateY(0);
}

<input type="radio" id="st-control-1" name="radio-set" checked="checked" />
<div class="st-scroll">
  <label for="st-control-1">I'm a label in .st-scroll but am linked to #st-control-1 so I can control my parent</label>
<input type="radio" id="st-control-2" name="radio-set" />
<label for="st-control-2">I'm a label linked to the other radio</label>
</div>

Answer 2

链接只能在 div 之外起作用的原因是因为效果是由 CSS 驱动的：#st-control-#:checked ~ .st-scroll 这意味着它会查找具有 .st-scroll 类的同级 DOM 元素。您需要将它放在滚动元素的外部，或者依靠 javascript 通过添加/删除某些类来触发相同的转换。

我可以看到它以各种方式完成，尽管最快的（我很懒惰）会是这样的：

在html中：

<input type="radio" name="radio-set" id="st-control-1" value="scroll-1">

...进一步向下

<input type="radio" name="radio-set" id="st-control-2" value="scroll-2">

在包含 jquery 的脚本中以节省时间...：

$(document).ready(function(){
       var scroll = $('.st-scroll');
       $('input[name="radio-set"]').click(function() {
             var which = $(this).attr('value');
             var prev = scroll.data('current');
             if(prev) scroll.removeClass(prev);
             scroll.addClass(which)
                   .data('current',which);
       });
});

最后是css：

.scroll-1 {
   transform: translateY(-100%);
}

.scroll-2 {
   transform: translateY(0);
}