如何使用材料设计使 div 浮动在页面的右侧（贴）

Question

所以我正在尝试创建一个布局，其中我有一个带有卡片的页面，右侧有一个摘要卡片，当我滚动时它会浮动。一种以前使用引导程序见过的典型词缀对象。到目前为止，这是我的尝试：

由于某种原因，前三张牌将浮动牌视为其行的一部分，从而调整了它们的大小。有没有办法解决这个问题？当我滚动时，我得到了所需的行为：

这是我的代码：

<div class="container" layout="row" layout-xs="column">
    <div flex="20" hide-sm></div>
    <div flex>
        <h1 style="margin-bottom: 20px">Which edition?</h1>
    </div>
    <div flex="20" hide-sm></div>
</div>

<div sticky style="position: relative; float: right; z-index: 2;" flex="20">
    <div>
        <md-card ng-class="vm.selectedSupport === 'standard' ? 'card-3' : 'card-1'"
                 ng-click="vm.toggleSelectedSupport('standard')">
            <img src="images/priority_bw.jpg"
                 class="md-card-image"
                 alt="Washed Out"
                 ng-if="vm.selectedSupport !== 'standard'">
            <img src="images/priority.jpg"
                 class="md-card-image"
                 alt="Washed Out"
                 ng-if="vm.selectedSupport === 'standard'">
            <md-card-title layout="column" layout-align="center center">
                <md-card-title-text>
                    <span class="md-headline">I don't need priority support</span>
                </md-card-title-text>
            </md-card-title>
            <md-card-content layout="column" layout-align="center center">
                <p align="center">
                    over email only <br/>
                    within three working days
                </p>
                <h2>$0</h2>
            </md-card-content>
            <md-card-actions layout="column" layout-align="start">
                <md-button ng-class="vm.selectedSupport === 'standard' ? 'md-raised md-primary md-hue-1' : 'md-raised md-accent md-hue-1'">
                    Selected
                </md-button>
            </md-card-actions>
        </md-card>
    </div>
</div>



<div class="container" layout="row" layout-xs="column">
    <div flex="20" hide-sm></div>
    <div flex>
        <md-card ng-class="vm.selectedCard === 'card1' ? 'card-3' : 'card-1'"
                 ng-click="vm.toggleSelected('card1')">
            <img src="images/header_bw.jpg"
                 class="md-card-image"
                 alt="Washed Out"
                 ng-if="vm.selectedCard !== 'card1'">
            <img src="images/header.jpg"
                 class="md-card-image"
                 alt="Washed Out"
                 ng-if="vm.selectedCard === 'card1'">
            <md-card-title layout="column" layout-align="center center">
                <md-card-title-text>
                    <span class="md-headline">Free</span>
                </md-card-title-text>
            </md-card-title>
            <md-card-content layout="column" layout-align="center center">
                <p align="center">
                    This is the free version of the software that we are offering. It's not the full offering
                    so if you want more i will need to see some $$$.</p>
                <p>
                    Some tool 1 <br/>
                    Some tool 1 <br/>
                    Some tool 1 <br/>
                </p>
                <h2>Free</h2>
            </md-card-content>
            <md-card-actions layout="column" layout-align="start">
                <md-button ng-class="vm.selectedCard === 'card1' ? 'md-raised md-primary md-hue-1' : 'md-raised md-accent md-hue-1'">
                    Selected
                </md-button>
            </md-card-actions>
        </md-card>
    </div>
    <div flex>
        <md-card ng-class="vm.selectedCard === 'card2' ? 'card-3' : 'card-1'"
                 ng-click="vm.toggleSelected('card2')">
            <img src="images/header1_bw.jpg"
                 class="md-card-image"
                 alt="Washed Out"
                 ng-if="vm.selectedCard !== 'card2'">
            <img src="images/header1.jpg"
                 class="md-card-image"
                 alt="Washed Out"
                 ng-if="vm.selectedCard === 'card2'">
            <md-card-title layout="column" layout-align="center center">
                <md-card-title-text>
                    <span class="md-headline">Pro</span>
                </md-card-title-text>
            </md-card-title>
            <md-card-content layout="column" layout-align="center center">
                <p align="center">
                    This is the free version of the software that we are offering. It's not the full offering
                    so if you want more i will need to see some $$$.</p>
                <p>
                    Some tool 1 <br/>
                    Some tool 1 <br/>
                    Some tool 1 <br/>
                </p>
                <h2>$9.99/month</h2>
            </md-card-content>
            <md-card-actions layout="column" layout-align="start">
                <md-button ng-class="vm.selectedCard === 'card2' ? 'md-raised md-primary md-hue-1' : 'md-raised md-accent md-hue-1'">
                    Selected
                </md-button>
            </md-card-actions>
        </md-card>
    </div>
    <div flex>
        <md-card ng-class="vm.selectedCard === 'card3' ? 'card-3' : 'card-1'"
                 ng-click="vm.toggleSelected('card3')">
            <img src="images/header2_bw.jpg"
                 class="md-card-image"
                 alt="Washed Out"
                 ng-if="vm.selectedCard !== 'card3'">
            <img src="images/header2.jpg"
                 class="md-card-image"
                 alt="Washed Out"
                 ng-if="vm.selectedCard === 'card3'">
            <md-card-title layout="column" layout-align="center center">
                <md-card-title-text>
                    <span class="md-headline">Enterprise</span>
                </md-card-title-text>
            </md-card-title>
            <md-card-content layout="column" layout-align="center center">
                <p align="center">
                    This is the free version of the software that we are offering. It's not the full offering
                    so if you want more i will need to see some $$$.</p>
                <p>
                    Some tool 1 <br/>
                    Some tool 1 <br/>
                    Some tool 1 <br/>
                </p>
                <h2>$19.99/month</h2>
            </md-card-content>
            <md-card-actions layout="column" layout-align="start">
                <md-button ng-class="vm.selectedCard === 'card3' ? 'md-raised md-primary md-hue-1' : 'md-raised md-accent md-hue-1'">
                    Selected
                </md-button>
            </md-card-actions>
        </md-card>
    </div>
    <div flex="20" hide-sm></div>
</div>
<div class="container" layout="row" layout-xs="column">
    <div flex="20" hide-sm></div>
    <div flex>
        <h1 style="margin-bottom: 5px;">How many users?</h1>
        <h4 style="margin: 0; color: grey;">
            <i class="fas fa-check"></i>
            Buy more than 5 and get 5% discount
        </h4>
        <h4 style="margin-top: 0; margin-bottom: 20px; color: grey;">
            <i class="fas fa-check"></i>
            Buy more than 50 and get 10% discount
        </h4>
    </div>
    <div flex="20" hide-sm></div>
</div>
<div class="container" layout="row" layout-xs="column">
    <div flex="20" hide-sm></div>
    <div flex>
        <div class="container" layout="row" layout-align="center center">
            <md-button class="md-fab md-primary md-hue-1"
                       aria-label="Eat cake"
                       ng-click="vm.count = (vm.count - 1) < 0 ? 0 : vm.count -1">
                <md-icon class="fas fa-minus"></md-icon>
            </md-button>
            <md-input-container>
                <input type="text"
                       title=""
                       aria-label="count-input"
                       style="text-align: center; width: 120px; height: 60px; font-size: 48px;"
                       ng-model="vm.count">
            </md-input-container>
            <md-button class="md-fab md-primary md-hue-1"
                       aria-label="Eat cake"
                       ng-click="vm.count = vm.count + 1">
                <md-icon class="fas fa-plus"></md-icon>
            </md-button>
        </div>
    </div>
    <div flex>
        <div class="container" layout="column" layout-align="center center">
            <p ng-if="vm.count < 50">Save <b>{{vm.count < 5 ? 5 : 10}}%</b> when you upgrade to <br/>
                {{vm.count < 5 ? 5 : 50}} licenses
            </p>
            <md-button class="md-raised md-primary md-hue-1"
                       ng-click="vm.setCount()"
                       style="width: 50%"
                       ng-if="vm.count < 50">
                Upgrade to {{vm.count < 5 ? 5 : 50}}
            </md-button>
            <h2 ng-if="vm.count >= 50" layout-align="center center" layout="column">
                <i class="fas fa-check fa-2x" style="color: green"></i>
                Awesome! You are saving 10%
            </h2>
        </div>
    </div>
    <div flex="20" hide-sm></div>
</div>

sticky 指令如下：

angular.module('MonkeyBarsApp').directive('sticky', Sticky);

Sticky.$inject = ['$mdSticky'];

function Sticky($mdSticky) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            $mdSticky(scope, element);
        }
    }
}

任何帮助将不胜感激。 我想模仿的东西：https://studio3t.com/buy/

Answer 1

这是 Jake，我在 https://studio3t.com/buy 上构建了您引用的页面。

如果我理解正确，您会发现浮动侧边栏影响了 3 个产品框的宽度，对吗？我的标记不同，但我可以向您解释我是如何布置页面的：

侧边栏与产品框在同一行：

<div class="row content-container">
    <div class="col-12 col-lg-9 p-4">...</div> <!-- content column -->
    <div class="col-12 col-lg-3 p-0">...</div> <!-- sidebar column -->
</div>

因此，此父行包含具有 3/4 + 1/4 拆分 (col-lg-9 + col-lg-3) 的列。每个产品框都包含在一个嵌套行中 > 然后是一个 col-12 div 来包装它们 > 每个都设置为 col-md-4：

我对顶部产品框的第一个猜测是它们的宽度设置不正确 - 如果您有一个 codepen 示例，我可以使用开发工具检查代码。固定位置侧边栏不应影响其他框的宽度 - 它位于页面的“流之外”。

但是，您使用的插件/代码可能首先将侧边栏的位置设置为相对，并且仅将其更改为固定滚动 - 因此侧边栏相对定位时的宽度可能会影响产品盒。

就附加元素而言，看起来好像您使用的是 Angular 1.5（我只熟悉 2+ 并且实际上使用 VueJS 构建了 Studio 3T 页面）。为了让侧边栏自己在滚动上附加，我使用了一个名为 Vue Affix 的插件。它检测滚动事件，然后将所选元素（侧边栏）的样式更改为 position: fixed 和 top: 160px（top 值是任意选项）：

如果有任何帮助，请告诉我！

祝你好运，

杰克