Dyrektywa kątowa do umieszczania paska bocznego

Próbuję umieścić pasek boczny w odpowiedniej dla mojej głównej zawartości. Próbowałem tutaj dyrektywy. Mimo tego, że uda mi się z górnym dodatkiem, to znaczy działa i trzyma się góry, gdy przewijam w dół, ale nie przewija się w przypadku, gdy zawartość paska bocznego jest dłuższa. Chcę to naprawić na górze i przenieść go przewijane zgodnie z główną treścią. ale jeśli jego zawartość jest większa niż ekran, powinna również przewijać do dołu i trzymać się na dole w tym samym czasie.Dyrektywa kątowa do umieszczania paska bocznego

<div class="background-white" sidebar-affix data-spy="affix" data-offset-top="80" data-offset-bottom="10">My sidebar content here</div> 

.directive('sidebarAffix', function($window) { 
    return { 
     restrict: 'EA', 
     link: function(scope, element, attrs) { 
      var originOffsetTop = element[0].offsetTop; 
      scope.condition  = function() { 
       return $window.pageYOffset > originOffsetTop; 
      }; 

      angular.element($window).bind('scroll', function() { 
       scope.$apply(function() { 
        console.log($window.pageYOffset > originOffsetTop); 
        if (scope.condition()) { 
         angular.element(element).removeClass('affix-top'); 
         angular.element(element).addClass('affix'); 
        } else { 
         angular.element(element).addClass('affix-top'); 
         angular.element(element).removeClass('affix'); 
        } 
       }); 
      }); 
     } 
    }; 
})

Chcę być przewijany w przypadku, gdy pasek boczny jest dłuższy niż oczekiwano, ale powinien w tym przypadku przylegać do dna.

Źródło

2016-05-03 Sankalp

Jakie są style jesteś dostarczanie .affix-top? Czy istnieje górny pasek nawigacyjny? Jeśli nie, spróbuj ustawić maksymalną wysokość: 100% wewnątrz .affix-top. Fiddle pomoże szybko rozwiązać problem. – MKAka

-1

Ustaw maksymalną wysokość na 100% i zwiększ margines górny, aby znaleźć odpowiednią pozycję do ustawienia miejsca maksymalna wysokość: 100%; margin-top: 50%; dodanie maks. Wysokości do górnej krawędzi i marginesu do div mam nadzieję, że to naprawi problem

Źródło

2016-05-11 09:42:02

Co powiesz na podanie pozycji w menu: ustalone; i top: XXpx to będzie zawsze pozostanie w tym samym miejscu, nawet jeśli przewijać zawartość w dół

.wrapper > div{ 
 
    display:inline-block; 
 
} 
 
.side-bar { 
 
    position:fixed; 
 
    top:10px; 
 
} 
 
.content { 
 
    
 
}

<div class='wrapper'> 
 
    <div class='side-bar'></div> 
 
    <div class='content'></div> 
 
</div>

Źródło

2016-05-16 07:10:40

Może to być stare stanowisko. Czy jednak uważasz, że ma on osobny widok i ładuje go na stronie indeksu. Zamiast obsługiwać go za pomocą css. W ten sposób można napisać osobny kontroler, aby uzyskać dostęp tylko do paska bocznego i oczywiście zostanie on naprawiony, a także można dodać inny widok, taki jak nagłówek, stopkę i zdefiniować osobny kontroler dla każdego z nich oraz zdefiniować oddzielny kontener do ładowania głównej zawartości. To może nie być dokładna odpowiedź, o którą prosiłeś (dyrektywa). Tylko sugestia.

Księgowanie Przykładowy kod HTML

<html lang="en" data-ng-app="SampleApp"> 
<head> 
<body ng-controller="SampleController" > 
    <!-- BEGIN HEADER --> 
    <div data-ng-include="'header.html'" data-ng-controller="HeaderController" > </div> 
    <!-- END HEADER --> 

    <!-- BEGIN CONTAINER --> 
    <div class="page-container" id="container"> 
     <!-- BEGIN SIDEBAR --> 
     <div data-ng-include="sidebar.html'" data-ng-controller="SidebarController" > </div> 
     <!-- END SIDEBAR --> 
     <!-- BEGIN CONTENT --> 
     <div > 
      <div class="page-content"> 
       <!-- BEGIN ACTUAL CONTENT --> 
       <div ui-view class="fade-in-up"> </div> 
       <!-- END ACTUAL CONTENT --> 
      </div> 
     </div> 
     <!-- END CONTENT --> 
    </div> 
    <!-- END CONTAINER --> 
    <!-- BEGIN FOOTER --> 
    <div data-ng-include="'footer.html'" data-ng-controller="FooterController" class="page-footer"> </div> 
    <!-- END FOOTER --> 
</body> 
<!-- END BODY -->

Źródło

2016-05-16 12:03:13

Dyrektywa kątowa do umieszczania paska bocznego

Odpowiedz

Powiązane problemy