javascript - 固定位置和 %width + 不与页脚重叠

Question

有两个网格的项目页面，左侧显示图像的网格（宽度：65%）和右侧显示项目信息的另一个网格（宽度 35%）。

这是实时预览的链接：http://meeped.co.uk:93/portfolio/ambition-world.html

如何将右侧的信息网格更改为固定并随页面滚动？并在击中页脚之前停止。

注意：我尝试将位置更改为固定，它使其滚动但网格宽度随着页面不断拉伸并溢出页面的宽度，即 1030 像素。

我已经尝试了很多 JavaScript 片段来让它滚动并停在页脚，但没有一个奏效。你会推荐什么？不使用插件。

页面的HTML如下：

        <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" /

        <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 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">    


                        </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: 35%;
    margin-top: 28px;
    padding-left: 45px;
}

.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;
    }

这也是我正在使用的一个 JS：

//Scroll-up button// 
$(window).scroll(function(){ 
    if ($(this).scrollTop() > 100) { 
      $('.scrollup').fadeIn(); 
    } 
    else { 
      $('.scrollup').fadeOut(); 
    } 
 }); 
$('.scrollup').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 600); return false; 
});

score 0 · Accepted Answer

因此，问题在于，通过添加，position:fixed;您将侧边栏相对于视口定位（这是固定定位的工作方式）。这意味着position:fixed;元素的宽度将始终相对于视口的宽度。

解决这个问题的方法是向侧边栏项目引入一个新的包装元素，并在侧边栏保持正常定位时定位这个新元素。fixed

这是如何执行此操作的示例...您希望在用户滚动过去后添加一个包装器（但前提是包装器尚不存在），并在它们向上滚动时删除包装器（但前提是它存在）。

因此，您可以在 JS 中包含：

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 100) { 
    $('.scrollup').fadeIn();
    if ($('.fixie').length == 0) {
      $('.detailsBox').wrap('<div class="fixie" />');
    }
  } 
  else { 
    $('.scrollup').fadeOut(); 
    if ($('.fixie').length != 0) {
      $('.detailsBox').unwrap('<div class="fixie" />');
    }
  } 
});

然后，在你的 CSS 中，你可以做固定定位的东西。

.fixie {
    width:1030px;
    position:fixed;
    top:100px; /* or however much you want */
    left:50%;
    margin-left:-515px;
    /* these two lines center the wrapper */
    padding:0 20px; /* to match the replaced wrapper */
}

.detailsBox {
    float:right;
}

.imagesGrid {
    float:left;
}

这应该工作:)

javascript - 固定位置和 %width + 不与页脚重叠

1 回答 1

Related

Reference