滚动时标题与粘性框重叠

时间：2013-09-04 09:34:19

标签： javascript jquery css html5 position

我希望在滚动时有一个粘贴在窗口上的边栏，但是当它碰到页脚时停止滚动。我已经设法让它达到了很好的水平，这只是一个我似乎无法解决的小问题。

在此测试：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 &amp; 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> &amp; discuss ways to achieve your goals within your budget &amp; time frame.</p>
                    <p><a target="_blank" href="http://www.vcita.com/meeting_scheduler?o=YnV0dG9u&amp;s=http%3A%2F%2Fwww.loaidesign.co.uk%2F&amp;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 &amp; 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;
        }

最后JavaScript位：

$(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"
            });
        }
    });

2 个答案:

答案 0 :(得分：1)

滚动时，采用内嵌式

top: 0px;

应用于元素类.detailsBox

这就是为什么它似乎“坚持”标题，当它不在一个小提琴时很难玩它，但从简短的忽略，你在这里改变css顶部值：

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"
    });
}

这不是必要的吗？你已经在该元素上有28px的margin-top，它的位置是固定的，所以它总是处于正确的位置。

答案 1 :(得分：1)

if(scrollTop < "auto" + 10)将始终返回false，因为"auto" + 10是一个字符串 替换这个：

if(scrollTop < "auto" + 10){
    $StickyBox.css({
        top: (200 - scrollTop) + "px",
        bottom: "auto"
    });
}

由此：

if(scrollTop < 80){
    $StinkyBox.css({
        top: (130 - scrollTop) + "px",
        bottom: "auto"
    });
}

我更改了值以获得所需的行为。

此外，在您的上一个条件中，将其设为top: 80低于标题：

else {
    $StinkyBox.css({
        top: 80,
        bottom: "auto"
    });
}

修改：增强代码

var gap = $window.height() - $StinkyBox.height() - 10;
var visibleFoot = 255 - $window.scrollBottom();
var scrollTop = $window.scrollTop();

if(scrollTop < 50){
    $StinkyBox.css({
        top: (130 - scrollTop) + "px",
        bottom: "auto"
    });
}else if (visibleFoot > gap - 100) {
    $StinkyBox.css({
        top: "auto",
        bottom: visibleFoot + "px"
    });
} else {
    $StinkyBox.css({
        top: 80,
        bottom: "auto"
    });
}
相关问题
最新问题