-4
거래가 좋습니다. 100 % 너비와 500px 높이의 콘텐츠가있는 페이지 (예 : 4000px 높이)가있는 거래가 있습니다. 그 콘텐츠 영역 안에는 특정한 방식으로 행동하고 싶은 상자 (100x100)가 있습니다. 페이지를 아래로 스크롤하면 해당 상자가 화면 상단에 닿아 스크롤 할 때까지 맨 위에 고정되어 부모 컨테이너의 맨 위에 고정되지 않게됩니다 (시작 위치) . 누구나 어떤 예나 간단한 수정이 있습니까 ????컨테이너 내부의 고정 된 divs
편집 :
는 내가 일을 생각이 수정을 발견하지만 난 내가 잘못 뭐하는 거지 모르겠어요
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
(코드는 HTML 문서의 머리에)
#contentSide {
background: black;
margin: 10px;
float: right;
width: 300px;
}
#contentSideIner {
width: 280px;
height: 400px;
margin: 0 auto;
background: red;
}
.sticky {
position: fixed;
top: 0;
}
이 코드는 클래스를 #contentSideIner div, .sticky {position : fixed; 상단 : 0; }. 내가 여기서 일종의 뇌사 실을하고 있니?
<!DOCTYPE HTML>
<html>
<head>
<title>Project Website: full review pages</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
<link rel="stylesheet" href="css/stylesMainReveiw.css" />
<style>
#banner { background-image: url("images/Destiny_Banner.jpg"); }
.playableOn {}
.rateBox { background-image: url("img/rating/rating3-big.png"); background-size: 150px 150px; }
#contentSide { height: 5100px; }
</style>
</head>
<body class="landing">
<!-- Header -->
<header id="header">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Monthly Spotlight</a>
<ul>
<li><a href="reviewDestiny.html">Destiny</a></li>
<li><a href="reviewDiablo.html">Diablo III</a></li>
<li><a href="reviewShadow.html">Shadow Of Mordor</a></li>
<li><a href="reviewTheLastOfUs.html">The Last Of Us</a>
<li><a href="reviewBayonetta.html">Bayonetta 2</a></li>
</ul>
</li>
<li><a href="#">Older Reviews</a></li>
</ul>
</header>
<!-- Banner -->
<section id="banner">
<h1>destiny</h1>
<h2>"Same Quote for the game as seen in js-load"</h2>
<div class="playableOn"><p>Playable On:</p></div>
<div class="rateBox"></div>
</section>
<!-- Main -->
<section id="main" class="container">
<div id="contentSide">
<div id="contentSideIner">
</div>
</div>
질문하는 방법에 대한 도움말 센터를 참조하십시오. "질문 (숙제) 도움말에는 지금까지 수행 한 작업 요약을 포함해야합니다 문제를 해결하기위한 어려움에 대한 설명과 문제 해결 방법을 알려줍니다. 나는 당신이 당신을 위해 당신의 코드를 작성할 누군가를 찾고 있다면 당신이 바른 장소에 있다고 생각하지 않는다. –
당신은 완전히 오해하지 않습니다. 1.) 나는이 사이트가 내가 가지고있는 이슈와 아무런 관련이없는 코드 수백 줄을 게시 할 수 있다는 것을 알지 못했습니다.) 이것은 좋은 자원이다. 나는이 효과를 얻는 가장 빠르고 쉬운 방법을 모른다. – Tyler
질문은 매우 간단합니다. 페이지 스크롤을 기반으로 div를 수정할 때 무엇을 찾아야할지 모르겠습니다. – Tyler