0
스크롤 할 때 창에 붙어있는 사이드 바를 원하지만 꼬리말에 맞을 때 스크롤을 멈추고 싶습니다. 나는 그것을 좋은 수준으로 작동시킬 수 있었지만, 해결할 수없는 작은 문제 일뿐입니다.스크롤 할 때 머리말이 끈적 상자와 겹칩니다.
테스트는 여기에 살고 : 스크롤 할 때까지 http://meeped.co.uk:93/portfolio/ambition-world.html
모든 것이 괜찮습니다, 사이드 바 스틱뿐만 아니라 고정 된 헤더 뒤에 숨겨진 페이지 상단에. 머리글 뒤에 숨기지 않으려면 어떻게해야합니까? 올바른 위치에 배치 될 수 있을까요? 어쨌든 우리는 그것을 애니메이션으로 처리하여 조금 부드럽게 할 수 있습니까? 여기
는 HTML입니다 :<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>LOAI Design Studio</title>
<meta name="description" content="LOAI Design studio"/>
<meta name="keywords" content="">
<meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="../assets/css/core.css">
<link rel="stylesheet" type="text/css" href="../assets/css/fixes.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width : 1030px)" href="../assets/css/tablets-landscape.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width : 770px)" href="../assets/css/tablets-portrait.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width : 500px)" href="../assets/css/phone.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
</head>
<body>
<!--Header--><header>
<div id="headerWrapper">
<div id="headerContent">
<div id="headerLogo">
<a href="../index.html"><img alt="loai design studio logo" src="../assets/elements/logo.png"/></a>
</div>
<nav><ul id="mainMenu" class="snapjs-expand-left">
<li><a href="../index.html">Home</a></li>
<li><a href="../portfolio.html">Portfolio</a>
<li><a href="../about.html">About Me</a></li>
<li><a href="../contact.html">Contact Me</a></li>
<li><a href="../blog.html">Blog</a></li>
</ul></nav>
</div>
</div>
</header>
<!--Website Content--><div id="Page">
<div id="secondHeader">
<a class="secondHeader-menuButton" href="#">Menu</a>
<p id="logo-smallScreen">LOAI Design Studio</p>
</div>
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Logo</p>
<img alt="Ambition World Logo Design" src="images/ambition-world-logo-mockup.jpg">
<p>Business Card & a Mug Mockup</p>
<img alt="Ambition World Business Card Design" src="images/ambition-world-bussiness-card-mockup.jpg">
</div><div class="detailsBox">
<h3>Ambition World General Trading </h3>
<p>This Logo and business card designed for my Dad's Dubai based company.</p>
<p><strong>Skills:</strong> Graphic Design</p>
<p><strong>Date:</strong> 2013</p>
<p class="shareButtons"><strong>Share This Project On:</strong>
<a href="http://facebook.com/LOAI.Design.Studio" class="facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;"><span>Facebook</span></a>
<a href="https://twitter.com/share" class="twitter" target="_blank"><span>Twitter</span></a></p>
<div>
<a onclick="history.go(-1);">Go Back</a>
<a href="#">Next Project</a>
<a class="scrollup">Go Up</a>
</div>
</div>
</div>
</div>
<!--Footer Section--><footer>
<div id="footer-sectionA">
<div class="footerContent">
<h3><strong>Want to get started?</strong></h3>
<p>I offer free, no-obligation consultation, will review your project <br> & discuss ways to achieve your goals within your budget & time frame.</p>
<p><a target="_blank" href="http://www.vcita.com/meeting_scheduler?o=YnV0dG9u&s=http%3A%2F%2Fwww.loaidesign.co.uk%2F&v=1afd868e">Schedule an Appointment Now</a></p>
</div>
</div>
<div id="footer-sectionB">
<div class="footerContent">
<p>Copyright ©2012 LOAI Design Studio. <br> All rights reserved.<a href="../terms-and-conditions.html">Terms & Conditions.</a></p>
</div>
</div>
</footer>
</div><!--The End Of The Page-->
<!--Scripts Links-->
<script type="text/javascript" src="../assets/libraries/jquery.js"></script>
<script type="text/javascript" src="../assets/js/slider.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
<script src="../assets/libraries/modernizr.js"></script>
<!--GoSquared Scripts-->
<script type="text/javascript">
var GoSquared = {acct: "GSN-035800-K"};
(function(w){
function gs(){
w._gstc_lt = +new Date;
var d = document, g = d.createElement("script");
g.type = "text/javascript";
g.src = "http://d1l6p2sc9645hc.cloudfront.net/tracker.js";
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(g, s);
}
w.addEventListener ? w.addEventListener("load", gs, false) : w.attachEvent("onload", gs);
})(window);
</script>
</body>
</html>
CSS의 :
/*Portoflio Project Page*/
#portfolio-projectPage{
text-align: left;
position: relative;
}
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img{
border: 1px solid #E8E8E8;
margin-bottom: 10px;
}
.imagesGrid p {
border-top: 1px solid #E8E8E8;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
width: 347px;
position: fixed;
margin-top: 28px;
padding-left: 30px;
}
.detailsBox p {
border-bottom: 1px solid #E8E8E8;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p, h3 {
vertical-align: bottom;
}
.detailsBox a {
vertical-align: middle;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #E8E8E8;
margin: 0;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a{
background-color: #E8E8E8;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover{
color: #FFFFFF;
background-color: #456087;
}
.detailsBox div br {
display: none;
}
.shareButtons a {
margin-left: 3px;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.shareButtons a span {
display: none;
}
그리고 마지막으로 자바 스크립트 비트 :
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var $StickyBox= $('.detailsBox');
var $window = $(window);
$window.bind("scroll resize", function() {
var gap = $window.height() - $StickyBox.height() - 10;
var visibleFoot = 255 - $window.scrollBottom();
var scrollTop = $window.scrollTop();
if(scrollTop < "auto" + 10){
$StickyBox.css({
top: (200 - scrollTop) + "px",
bottom: "auto"
});
}else if (visibleFoot > gap) {
$StickyBox.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$StickyBox.css({
top: 0,
bottom: "auto"
});
}
});
악취 또는 끈적? –
아, 미안해! 권자가 고쳤다. –
당신의 코드에서 동일하기 때문에 나는 물었다 ... –