Question

如果你去：http://www.loaidesign.co.uk/projects.php?project=Lights_of_Venice并开始滚动，你会注意到有一个StickyBox - 当Header触及它的顶部时，我似乎无法让它开始滚动。目前，在向下滚动600px后，它开始滚动页面。我不想那样，反正让它自动化吗？因为正好在它上方的大图像的高度将从项目变为另一个。

这是我正在使用的当前脚本：

//StickyBox
    $(function () {
        $.fn.scrollBottom = function () {
        return $(document).height() - this.scrollTop() - this.height();
    };
        var $StickyBox = $('.detailsBox'),
            $window = $(window);

    $window.bind("scroll resize", function () {
        var gap = $window.height() - $StickyBox.height(),
            footer = 320 - $window.scrollBottom(),
            scrollTop = $window.scrollTop();

            if ($window.width() <= 770) {
            $StickyBox.css({
                position: "relative",
                top: '0',
                bottom: 'auto'
            });
                return;
            }

            $StickyBox.css({
                top: "auto",
                bottom: "auto",
                position: "fixed"
            });

            if (scrollTop < 600) {
            $StickyBox.css({
                position: "absolute",
                bottom: "auto"
            });

            } else if (footer > gap - 100) {
            $StickyBox.css({
                top: "auto",
                bottom: footer + "px"
            });

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

HTML：

<div id="page"><!--Main Container-->    
            <img class="project-top-image" src="<?php
                    $headerImage = mysql_query("select * from images where binder='".$row["id"]."' AND isHeader=TRUE", $connection);
                    while($image = mysql_fetch_array ($headerImage)) {
                        echo($image["imageSrc"]);
                    }
                ?>">

            <!--Header (Small Screens Only)-->  
            <?php include ("assets/templates/second-header.inc"); ?>    

            <!--//////////////////Page Content///////////////////-->

            <div id="projectSectionA"  class="wrapperB">
                <div id="projectPage" class="content">
                    <?php                       
                        echo('<div class="imagesGrid">');
                        $imagesDb = mysql_query("select * from images where binder='".$row["id"]."' and isHeader=FALSE", $connection);
                        while($image = mysql_fetch_array ($imagesDb)) {
                            echo('<p>'.$image['imageTitle'].'</p>');
                            echo('<img alt="'.$image["alt"].'" src="'.$image["imageSrc"].'"/>');
                        }
                        echo('</div><div class="detailsBox">');
                        echo('<h1>'.$row['title'].'</h1>');
                        echo('<p>'.$row['description'].'</p>');
                        echo('<p><a href="http://'.$row['siteLink'].'" target="_blank">'.$row['siteLink'].'</a></p>');
                        echo('<p><strong>Skills:</strong> '.$row['skills'].'</p>');
                        $projectDate = date("Y", strtotime($row['date']));
                        echo('<p><strong>Year:</strong> '.$projectDate.'</p>');

                    ?>
                    <p class="share icons"><strong>Share This Project On:</strong><br>
                        <a href="#" 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;" class="facebook"><span>Facebook</span></a>                    
                        <a href="#"  class="twitter" onclick="return popitup('https://twitter.com/share')"><span>Twitter</span></a>
                        <!--Twitter Popup Script--><script type="text/javascript"> function popitup(url) { newwindow=window.open(url,'name','height=440,width=700'); if (window.focus) {newwindow.focus();} return false;}</script>
                    </p>
                    <div>
                        <a href="portfolio.php">Go Back</a>
                        <a class="scrollup">Scroll Up</a>   
                    </div>
                </div>
            </div>

Answer 1

我不太确定你的意思是自动，但我认为你想得到粘性盒的最高位置，因为你担心用不同的高度改变上面的大图会给你一个不同的结果，所以你会必须更改您在此条件下设置的值 - if (scrollTop < 600) {}。

您可以尝试$StickyBox.offset().top，这会给出$StickyBox相对于文档的最高位置。

StickyBox在其时间之前或之后开始滚动

1 个答案: