我在表单上放置浮动按钮以用作锚点（页面很大），但是仅显示1个按钮，但应显示3个按钮。
目标是何时滑动鼠标滚动条，以分别在单元1，单元2和单元3的另一个按钮下方显示一个按钮。然后单击它们，进入各自的会话。我没有3个按钮，只有一个按钮，这将到达页面顶部。
移动鼠标并查看按钮（仅出现一个按钮）
$(document).ready(function(){
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao1").style.display = "block";
} else {
document.getElementById("navegacao1").style.display = "none";
}
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao2").style.display = "block";
} else {
document.getElementById("navegacao2").style.display = "none";
}
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao3").style.display = "block";
} else {
document.getElementById("navegacao3").style.display = "none";
}
}
function anconrau1() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function anconrau2() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function anconrau3() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
});.sessao-unidade {
padding-top: 11px;
height: 45px;
display: block;
width: 100%;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.42857143;
text-align: center;
color: #fff;
background-color: rgb(66, 139, 202);
border: 0px solid rgb(177, 177, 177);
margin-bottom: 10px;
}
.sessao-titulos {
display: block;
width: 100%;
color: rgb(27, 80, 124);
background-color: #b4d5f1;
border-color: #357ebd;
padding: 6px 12px;
margin-bottom: 10px;
margin-top: 2px;
font-size: 14px;
font-weight: bold;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border-radius: 2px;
overflow: visible;
text-transform: uppercase;
}
.sessao-titulos:hover, .sessao-titulos:active, .sessao-titulos:visited, .sessao-titulos:focus{
text-decoration: none;
}
.flutuante{
display: none;
position: fixed;
z-index: 9999;
background-color: #e82222;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 2px;
border: none;
font-size: 12px;
}
#navegacao1 {
bottom: 15px;
right: 15px;
}
#navegacao2 {
bottom: 30px;
right: 15px;
}
#navegacao3 {
bottom: 60px;
right: 15px;
}
#navegacao1:hover, #navegacao2:hover, #navegacao3:hover {
background-color: #164b79;
text-decoration: none;
}<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="flutuante" onclick="anconrau1()" id="navegacao1" title="Ir ao topo">Unity 1</a>
<a class="flutuante" onclick="anconrau2()" id="navegacao2" title="Ir ao topo">Unity 2</a>
<a class="flutuante" onclick="anconrau3()" id="navegacao3" title="Ir ao topo">Unity 3</a>
<div id="div-unidades">
<div id="unidade1">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 1
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u1-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Class number:</label>
<input type="number" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u1-data-aula" id="u1-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u1-tipo-aula">Classroom Type:</label>
<select name="" id="u1-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<div class="u1-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u1-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u1-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u1-objetivo-forum" id="u1-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u1-ativacao-forum" id="u1-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u1-avaliacao-forum">Evaluation:</label>
<select name="u1-avaliacao-forum" id="u1-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u1-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u1-peso-forum" id="u1-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u1-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u1-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u1-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u1-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u1-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 2 -->
<div id="unidade2">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 2
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u2-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Class number:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u2-tipo-aula">Classroom Type:</label>
<select name="" id="u2-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u2-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u2-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u2-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u2-objetivo-forum" id="u2-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u2-ativacao-forum" id="u2-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u2-avaliacao-forum">Evaluation:</label>
<select name="u2-avaliacao-forum" id="u2-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u2-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u2-peso-forum" id="u2-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<!-- Other tools -->
<div class="u2-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u2-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u2-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u2-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u2-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--UNIDADE 3 -->
<div id="unidade3">
<div class="row">
<div class="col-md-12">
<span class="sessao-unidade">
Unity 3
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u3-conteudo-aulas">
Classrooms
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-aulas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Class number:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-data-aula">Classroom Date:</label>
<input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="u3-tipo-aula">Classroom Type:</label>
<select name="" id="u3-tipo-aula" class="form-control">
<option hidden="true">Select item</option>
<option value="">Presential</option>
<option value="">Virtual</option>
</select>
</div>
</div>
</div>
<!-- FORUNS DE DISCUSSÃO DA UNIDADE -->
<div class="u3-foruns-discussao">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u3-conteudo-foruns">
Unit Discussion Forum
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-foruns">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="u3-objetivo-forum">Forum Objective</label>
<input type="text" class="form-control" name="u3-objetivo-forum" id="u3-objetivo-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-ativacao-forum">Activation period for the unit:</label>
<input type="date" class="form-control" name="u3-ativacao-forum" id="u3-ativacao-forum">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="u3-avaliacao-forum">Evaluation:</label>
<select name="u3-avaliacao-forum" id="u3-avaliacao-forum" class="form-control">
<option hidden="true">Select item</option>
<option value="">Not rated yet</option>
<option value="">With note</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="u3-peso-forum">Weight (%):</label>
<input type="number" class="form-control" name="u3-peso-forum" id="u3-peso-forum" step="1" min="0" max="100">
</div>
</div>
</div>
</div>
</div>
<div class="u3-demais-ferramentas">
<div class="row">
<div class="col-md-12">
<a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u3-conteudo-wiki">
Other tools
</a>
</div>
</div>
<div class="collapse" id="u3-conteudo-wiki">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="u3-possui-wiki">Does the unit have a Wiki?</label>
<select name="" id="u3-possui-wiki" class="form-control">
<option hidden="true">Select item</option>
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
尝试使用 String tivoServiceCodes = "D1FAMN,DTV|SKYSP1,DTV|MOV01,VOD";
String[] serviceCodes = tivoServiceCodes.split("\\|");
for(String sc : serviceCodes){
System.out.println(sc.toString());
}
而不是使用单独的功能
$('#navegacao1,#navegacao2,#navegacao3').click(function(){$(document).ready(function(){
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navegacao1").style.display = "block";
document.getElementById("navegacao2").style.display = "none";
document.getElementById("navegacao3").style.display = "none";
} else if ((document.body.scrollTop > 20 && document.body.scrollTop > 20 )|| (document.body.scrollTop < 30 && document.body.scrollTop < 30)) {
document.getElementById("navegacao2").style.display = "block";
document.getElementById("navegacao1").style.display = "none";
document.getElementById("navegacao3").style.display = "none";
}
else if ((document.body.scrollTop < 30 && document.body.scrollTop > 30 )|| (document.body.scrollTop <50 && document.body.scrollTop <50)) {
document.getElementById("navegacao3").style.display = "block";
document.getElementById("navegacao1").style.display = "none"; document.getElementById("navegacao2").style.display = "none";
}
}
$(function(){
$('#navegacao1,#navegacao2,#navegacao3').click(function(){
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
});
});.sessao-unidade {
padding-top: 11px;
height: 45px;
display: block;
width: 100%;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
line-height: 1.42857143;
text-align: center;
color: #fff;
background-color: rgb(66, 139, 202);
border: 0px solid rgb(177, 177, 177);
margin-bottom: 10px;
}
.sessao-titulos {
display: block;
width: 100%;
color: rgb(27, 80, 124);
background-color: #b4d5f1;
border-color: #357ebd;
padding: 6px 12px;
margin-bottom: 10px;
margin-top: 2px;
font-size: 14px;
font-weight: bold;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border-radius: 2px;
overflow: visible;
text-transform: uppercase;
}
.sessao-titulos:hover, .sessao-titulos:active, .sessao-titulos:visited, .sessao-titulos:focus{
text-decoration: none;
}
.flutuante{
display: none;
position: fixed;
z-index: 9999;
background-color: #e82222;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 2px;
border: none;
font-size: 12px;
}
#navegacao1 {
bottom: 15px;
right: 15px;
}
#navegacao2 {
bottom: 30px;
right: 15px;
}
#navegacao3 {
bottom: 60px;
right: 15px;
}
#navegacao1:hover, #navegacao2:hover, #navegacao3:hover {
background-color: #164b79;
text-decoration: none;
}
答案 1 :(得分：0)
这里的问题是您要重覆scrollfunction函数三遍，所以唯一使用的是最后一个。
如果scrollTop值大于20，则在比较所有三个函数时，还应根据每个元素检查scrollTop值。