साइडबार

affixing के लिए कोणीय निर्देश मैं अपनी मुख्य सामग्री के संबंध में साइडबार चिपकाने की कोशिश कर रहा हूँ। मैंने यहां निर्देश का प्रयास किया है। हालांकि मैं शीर्ष प्रत्यय के साथ सफल हूं यानी यह स्क्रॉल करते समय शीर्ष पर काम करता है और शीर्ष पर चिपक जाता है, लेकिन यह मेरी साइडबार सामग्री लंबे समय तक स्क्रॉल करने में विफल रहता है। मैं इसे शीर्ष पर ठीक करना चाहता हूं और इसे मुख्य सामग्री के अनुसार स्क्रॉल करने योग्य बनाना चाहता हूं। लेकिन अगर इसकी सामग्री अधिक है तो स्क्रीन को नीचे भी स्क्रॉल करना चाहिए और एक ही समय में नीचे तक चिपकना चाहिए।साइडबार

<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'); 
        } 
       }); 
      }); 
     } 
    }; 
})

यदि साइडबार अपेक्षा से अधिक लंबा है तो मुझे स्क्रॉल करने योग्य होना चाहिए, लेकिन इस मामले में इसे नीचे रहना चाहिए।

स्रोत

2016-05-03 Sankalp

शैलियों आप .affix-शीर्ष करने के लिए प्रदान कर रहे हैं कर रहे हैं क्या पोस्ट कर रहा है? क्या कोई शीर्ष नेविगेशन बार मौजूद है? यदि अधिकतम ऊंचाई डालने का प्रयास न करें: 100% अंदर .affix-top। फिडल जल्दी से समस्या को हल करने में मदद करेगा। – MKAka

-1

अधिकतम ऊंचाई को 100% तक सेट करें और स्थान अधिकतम ऊंचाई सेट करने के लिए उचित स्थिति खोजने के लिए मार्जिन-टॉप बढ़ाएं: 100%; मार्जिन-टॉप: 50%; शरीर को अधिकतम ऊंचाई और div से मार्जिन टॉप जोड़ने के लिए उम्मीद है कि यह समस्या

स्रोत

2016-05-11 09:42:02

अपनी मेनू स्थिति देने के बारे में क्या है: निश्चित; और शीर्ष: XXpx तो यह हमेशा एक ही जगह में भले ही आप अपनी सामग्री नीचे

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

स्रोत

2016-05-16 07:10:40

स्क्रॉल यह पुराने पोस्ट हो सकता रहना होगा होगा। हालांकि, क्या आपने इसे अलग दृश्य रखने और इसे इंडेक्स पेज में लोड करने पर विचार किया था। सीएसएस का उपयोग करके इसे संभालने के बजाय। ऐसा करके आप केवल साइडबार तक पहुंचने के लिए एक अलग नियंत्रक लिख सकते हैं और निश्चित रूप से यह तय किया जाएगा और आप हेडर, पाद लेख जैसे अन्य दृश्य जोड़ सकते हैं और उनमें से प्रत्येक के लिए एक अलग नियंत्रक परिभाषित कर सकते हैं और मुख्य सामग्री लोड करने के लिए एक अलग कंटेनर परिभाषित कर सकते हैं। यह एक सटीक उत्तर नहीं हो सकता है जिसे आपने (निर्देश) के लिए कहा है। केवल एक सलाह।

एक नमूना एचटीएमएल

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

स्रोत

2016-05-16 12:03:13

साइडबार

उत्तर

संबंधित मुद्दे