-2

当我滚动时，如何使我现有的结帐购物车浮动/跟随（最小化表格以节省屏幕空间并在可能的情况下单击最大化会很棒）

另外，如果你能帮助我让它神奇地出现在页面的某个点上，那肯定会很感激。

任何帮助都会很棒！！！

当前格式：http: //i265.photobucket.com/albums/ii208/dentyne_fire/untitled_zps88f72bf0.jpg

代码如下：

购物车部门：

     <div id="sidebar">
            <h2>Your Cart</h2>


            <!--Add a Div with the class "simpleCart_items" to show your shopping cart area.-->
            <div class="simpleCart_items" >
            </div>


            <!--Here's the Links to Checkout and Empty Cart-->
            <a href="#" class="simpleCart_empty"><font color="#f5d700">empty cart</font></a>
            <a href="#" class="simpleCart_checkout">Checkout</a>



            <!--Nothing below this has to do with simpleCart (js) functionality-->

        <!--End #sidebar--> 
</div>

购物车 CSS：

         <style>

    .cartHeaders,.totalRow{display:none;}
    .simpleCart_items{
        overflow-y:auto;
        overflow-x:hidden;
        height:324px;
        width:243px;
        margin-bottom:20px;

    }
    .itemContainer{
        clear:both;
        width:229px;
        padding:11px 0;
        font-size:11px;
    }
    .itemImage{
        float:left;
        width:60px;
    }
    .itemName{
        float:left;
        width:85px;
    }
    .itemPrice{
        float:left;
        width:85px;
        color:#418932;
    }
    .itemQuantity{
        float:left;
        width:33px;
        margin-top:-12px;
        vertical-align:middle;
    }
    .itemQuantity input{
        width:20px;
        border:1px solid #ccc;
        padding:3px 2px;
    }

    .itemTotal{
        float:left;
        color:#c23f26;
        margin-top:-6px
    }
</style>
4

1 回答 1

1

我们不能帮助你做事情，我们只能帮助你纠正你自己无法做到的事情。

您应该做的是编写一小段 JavaScript 来检查用户是否通过了您页面上的某个点，您可以使用onScroll事件和offsetheight.

如果用户通过了该点，则将该类fixed应用于您的结帐，如果没有，则删除该类（不要忘记这一点，用户也倾向于向上滚动）。接下来创建一个固定的 CSS 类并确保购物车在屏幕上正确定位。

祝你好运

于 2013-06-15T02:35:42.140 回答