【问题标题】:Scroll Value not working滚动值不起作用
【发布时间】:2018-03-31 07:26:14
【问题描述】:

 <html>
	<head>
		<title>jQuery 6</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<style>
		#a1{
		background: aqua;
		width:80vw;
		height:80vh;
		}
		#a2{
		background: maroon;
		width:60vw;
		height:60vh;
		}
		#a3{
		background: magenta;
		width:40vw;
		height:40vh;
		}	
		#a4{
		background: green;
		width:20vw;
		height:20vh;
		}
		#a5{
		background: purple;
		width:10vw;
		height:10vh;
		}
		#i11{
		position:fixed;
		}
		img{
			width:3vw;
			position:fixed;
			right:5px;
			bottom:5px;
		}
		</style>
	</head>
	<body>
	<a id="a1">
		<script>
		$(document).ready(function(){
			$("tr:odd").css("background-color", "yellow")
			$("tr:even").css("background-color", "silver")
			/*$("input").blur(function(){
				alert('hello')
			})
			$("input").change(function(){
				$("table").hide(1000)
			})
			$("td").dblclick(function(){
				$(this).hide(2000)
			})*/
			//$("a").click(function(event){
				//event.preventDefault();
			//})
		//	$("#a5").css("border", "4px dotted yellow")
			//$("#a5").parent().css("border", "4px dotted blue")
			//$("#a5").parents().css("border", "4px dotted red")
			//$("#a5").parentsUntil("aside").css("border", "4px dotted red")
			/*$("#b1").click(function(){
			if($("#t1").prop("checked")==true){
				$("#t1").prop("checked", false)
			}
			//else{
				$("#t1").prop("checked", true)
			}
			})*/
			$("img").hide();
			$(window).scroll(function(){
				if ($(this).scrollTop()>120){
				$("i11").val($(this).scrollTop())
				$("img").fadeIn("slow")
			}
			else{
				$("img").fadeOut("slow")
			}
			})
		})
		
		</script>
		<input type="checkbox" id="t1" />
		<button id="b1">check/uncheck</button>
		<input id="i11">
		<table border="1">
			<tr>
				<th>Company</th>
				<th>Country</th>
			</tr>
			<tr>
				<td><a href="http://google.com">Google</a></td>
				<td>USA</td>
			</tr>
			<tr>
				<td><a href="http://smentertainment.com">SM entertainment</td>
				<td>South Korea</td>
			</tr>
			<tr>
				<td>BitCoin</td>
				<td>Japan</td>
			</tr>
			<tr>
				<td>Marvel</td>
				<td>USA</td>
			</tr>
			<tr> 
				<td>Vans</td>
				<td>USA</td>
			</tr>
		</table>
		<div id="a1">
			<div id="a2">
				<aside id="a3">
					<div id="a4">
						<div id="a5"></div>
					</div>
				</aside>
			</div>
		</div><a href="jquery6.html#a1"><img src="up.jpg">
		<br><br><br><br><br><br><br>text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
	</body>
</html>

所以这是我的完整代码,我要做的是在滚动时获取输入中的值,这里出了什么问题?

我一遍又一遍地检查代码,但该值不起作用。然后通过图像,我试图到达有效的页面顶部,淡入淡出方法也是如此。是函数内部的问题吗?

【问题讨论】:

    标签: jquery html scroll


    【解决方案1】:

    您在$("i11").val($(this).scrollTop()) 中错过了#,所以这将是$("#i11").val($(this).scrollTop()) 请看下面的sn-p:

    <html>
    	<head>
    		<title>jQuery 6</title>
    		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    		<style>
    		#a1{
    		background: aqua;
    		width:80vw;
    		height:80vh;
    		}
    		#a2{
    		background: maroon;
    		width:60vw;
    		height:60vh;
    		}
    		#a3{
    		background: magenta;
    		width:40vw;
    		height:40vh;
    		}	
    		#a4{
    		background: green;
    		width:20vw;
    		height:20vh;
    		}
    		#a5{
    		background: purple;
    		width:10vw;
    		height:10vh;
    		}
    		#i11{
    		position:fixed;
    		}
    		img{
    			width:3vw;
    			position:fixed;
    			right:5px;
    			bottom:5px;
    		}
    		</style>
    	</head>
    	<body>
    	<a id="a1">
    		<script>
    		$(document).ready(function(){
    			$("tr:odd").css("background-color", "yellow")
    			$("tr:even").css("background-color", "silver")
    			/*$("input").blur(function(){
    				alert('hello')
    			})
    			$("input").change(function(){
    				$("table").hide(1000)
    			})
    			$("td").dblclick(function(){
    				$(this).hide(2000)
    			})*/
    			//$("a").click(function(event){
    				//event.preventDefault();
    			//})
    		//	$("#a5").css("border", "4px dotted yellow")
    			//$("#a5").parent().css("border", "4px dotted blue")
    			//$("#a5").parents().css("border", "4px dotted red")
    			//$("#a5").parentsUntil("aside").css("border", "4px dotted red")
    			/*$("#b1").click(function(){
    			if($("#t1").prop("checked")==true){
    				$("#t1").prop("checked", false)
    			}
    			//else{
    				$("#t1").prop("checked", true)
    			}
    			})*/
    			$("img").hide();
    			$(window).scroll(function(){
    				if ($(this).scrollTop()>120){
    				$("#i11").val($(this).scrollTop())
    				$("img").fadeIn("slow")
    			}
    			else{
    				$("img").fadeOut("slow")
    			}
    			})
    		})
    		
    		</script>
    		<input type="checkbox" id="t1" />
    		<button id="b1">check/uncheck</button>
    		<input id="i11">
    		<table border="1">
    			<tr>
    				<th>Company</th>
    				<th>Country</th>
    			</tr>
    			<tr>
    				<td><a href="http://google.com">Google</a></td>
    				<td>USA</td>
    			</tr>
    			<tr>
    				<td><a href="http://smentertainment.com">SM entertainment</td>
    				<td>South Korea</td>
    			</tr>
    			<tr>
    				<td>BitCoin</td>
    				<td>Japan</td>
    			</tr>
    			<tr>
    				<td>Marvel</td>
    				<td>USA</td>
    			</tr>
    			<tr> 
    				<td>Vans</td>
    				<td>USA</td>
    			</tr>
    		</table>
    		<div id="a1">
    			<div id="a2">
    				<aside id="a3">
    					<div id="a4">
    						<div id="a5"></div>
    					</div>
    				</aside>
    			</div>
    		</div><a href="jquery6.html#a1"><img src="up.jpg">
    		<br><br><br><br><br><br><br>text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
    	</body>
    </html>

    【讨论】:

      猜你喜欢
      • 2023-03-13
      • 2017-12-15
      • 2016-11-01
      • 2017-08-11
      • 2023-04-05
      • 2014-01-19
      • 2017-12-21
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多