Question

如何滚动（将表格最小化以节省屏幕空间并在点击时最大化，如果可能会令人惊叹），如何使我已存在的结帐购物车浮动/跟随

另外，如果你能帮助我让它神奇地出现在页面的某一点，那肯定会受到赞赏。

任何帮助都会很棒!!!

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

代码如下：

Cart Div：

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

Answer 1

我们无法帮助您制作我们只能帮助您纠正自己无法完成的事情。

你应该做的是编写一小段JavaScript来检查用户是否已经通过了您网页上的特定点，您可以使用onScroll事件和offsetheight执行此操作。

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

祝你好运

使我的结帐购物车成为滚动时出现的浮动菜单？

1 个答案: