Как сделать 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>

Важная директива следующая:

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

это Джейк, я построил страницу, на которую вы ссылаетесь 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).Ящики с продуктами находятся внутри вложенной строки> затем div-12 col, чтобы обернуть их> каждому из них присвоено col-md-4:

Мое первое предположение с полями для продуктов вверху состоит в том, что они установлены на неправильную ширину - если у вас есть пример с кодовым пером, я мог бы проверить кодс инструментами разработки.Боковая панель с фиксированным положением не должна влиять на ширину других полей - она ​​«вне потока» страницы.

Однако возможно, что используемый вами плагин / код сначала устанавливает положение боковой панели относительно и только меняет его на фиксированное при прокрутке - поэтому ширина боковой панели, когда она относительно позиционирована, можетвоздействовать на коробки продукта.

С точки зрения прикрепления элемента это выглядит так, как будто вы используете Angular 1.5 (я знаком только с 2+ и фактически создал страницу Studio 3T с VueJS).Для того, чтобы боковая панель сама прикреплялась к прокрутке, я использую плагин Vue Affix.Он обнаруживает события прокрутки, а затем изменяет стиль выбранного элемента (боковой панели) на положение: фиксированное и верхнее: 160 пикселей (верхнее значение является произвольным параметром):

Дайте мне знать, если это поможет!

Удачи,

Джейк