http://www.loaidesign.co.uk/projects.php?project=Lights_of_Veniceにアクセスしてスクロールを開始すると、StickyBox があることに気付くでしょう- スクロールを開始できないようですヘッダーがその上部に触れたとき。現時点では、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>