add sticky for sidebar

godofredoninja · Dec 17, 2016 · 908bd94 · 908bd94
1 parent 028682b
commit 908bd94
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 37 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/assets/js/bundle.min.js b/assets/js/bundle.min.js
diff --git a/partials/footer.hbs b/partials/footer.hbs
@@ -1,6 +1,6 @@
-<footer class="footer">	
+<footer class="footer">
 	<div class="footer-wrap">
 		<div class="footer-copy">&copy; {{date format="YYYY"}} <a href="{{@blog.url}}">{{@blog.title}}</a> Powered by <a href="https://ghost.org" target="_blank">Ghost</a></div>
-		<div class="footer-design-author"><span>Design with</span> <i class="i-favorite heart"></i> by <a href="http://bit.ly/GodoFredoNinja" target="_blank" title="Desarrollador Web FullStack.">@GodoFredoNinja</a></div>
+		<div class="footer-design-author"><span>Design with</span> <i class="i-favorite heart"></i> by <a href="http://bit.ly/GodoFredoNinja" target="_blank" title="Developer Web FullStack.">@GodoFredoNinja</a></div>
 	</div>
 </footer>
diff --git a/partials/sidebar.hbs b/partials/sidebar.hbs
@@ -1,20 +1,30 @@
 {{!-- Sidebar right --}}
 <div id="sidebar" class="col s12 sidebar u-h-b-lg">
 
-	{{!-- 5 articles featured in page (home - author - tag) --}}
-	{{#is "home"}}
-		{{#get "posts" filter="featured:true" limit="5" as |featured|}}
-			{{> "widget-entry-sidebar" widgetTitle="Featured Posts" widgetPosts=featured}}
-		{{/get}}
-	{{/is}}
+    {{!-- 5 articles featured in page (home - author - tag) --}}
+    {{#is "home"}}
+        {{#get "posts" filter="featured:true" limit="5" as |featured|}}
+            {{> "widget-entry-sidebar" widgetTitle="Featured Posts" widgetPosts=featured}}
+        {{/get}}
+    {{/is}}
 
-	{{!-- 5 articles recents in page (post) --}}
-	{{#is "post, tag, author, paged"}}
-		{{#get "posts" limit="5" as |recents|}}
-			{{> "widget-entry-sidebar" widgetTitle="Latest" widgetPosts=recents}}
-		{{/get}}
-	{{/is}}
+    {{!-- 5 articles recents in page (post) --}}
+    {{#is "post, tag, author, paged"}}
+        {{#get "posts" limit="5" as |recents|}}
+            {{> "widget-entry-sidebar" widgetTitle="Latest" widgetPosts=recents}}
+        {{/get}}
+    {{/is}}
 
-	{{!-- Add your content here --}}
+    {{!-- Add your content here --}}
+    <div class="sidebar-items">
+        <div class="sidebar-title">... your title ...</div>
+        ... your content ...
+    </div>
+
+    {{!-- Add your content sticky --}}
+    <div class="sidebar-sticky">
+        <div class="sidebar-title">...your title sticky ...</div>
+        ... your content sticky ...
+    </div>
 
 </div>
diff --git a/src/js/app.js b/src/js/app.js
@@ -8,6 +8,7 @@ Mapache Javascript Functions
 
 // import external dependencies
 // import ghostHunter from './lib/jquery.ghostHunter'; // eslint-disable-line
+import stickyKit from './lib/sticky-kit'; // eslint-disable-line
 
 // import local dependencies
 import Mapache from './app/app.helper';
@@ -178,6 +179,11 @@ $doc.on('ready', () => {
     related.mapacheGet();
   }
 
+  /* sticky fixed for Sidenar */
+  $('.sidebar-sticky').stick_in_parent({
+    offset_top: $header.outerHeight() + 16,
+  });
+
   /* Disqys Comments */
   if (typeof disqusShortname !== 'undefined' && $comments.length > 0) disqusComments(disqusShortname); // eslint-disable-line
 });
diff --git a/src/js/lib/sticky-kit.js b/src/js/lib/sticky-kit.js
diff --git a/src/sass/app/_footer.scss b/src/sass/app/_footer.scss
@@ -4,7 +4,8 @@
   background: $footer-bg-color;
   color: $footer-color;
   padding: 1.6rem 15px;
-  font-size: 15px;
+  font-size: 14px;
+  font-weight: 500;
 
   a{
     color: $footer-color-link;

diff --git a/src/sass/app/_sidebar.scss b/src/sass/app/_sidebar.scss
@@ -51,11 +51,4 @@
     font-size: 18px;
   }
 
-  // Fixed
-  .fixed.active{
-    position: fixed;
-    top: $header-height + 28;
-    width: 300px;
-  }
-
 }