Question

我找到了this tutorial，它为我的页面引入了一个转换，只需使用单选按钮一下即可将其滑下来。

我的想法是，我的网页width和height为100%，每次点击都会使用translateY“在画布外”移动页面（在{{1第663行）就像在提供的教程中一样。

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

这是顶部的单选按钮。

st-scroll

尝试将此代码从第一个<input type="radio" name="radio-set" id="st-control-1"/> <a href="#st-panel-1" class="arrow-down up"></a>移到<secton>之下

site-wrapper

你会看到问题所在。我的想法是，这与Z-index有关，但我可能错了。我想将两个按钮放在<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">内。

我的网站是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元素。您需要在scroll元素的外部使用它，或者通过添加/删除某些类来依赖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);
}

使用单选按钮进行转换

2 个答案: