Merge pull request #4096 from rockandror/sticky_fixes

Fix sticky element on medium/large screens

app/assets/javascripts/foundation_extras.js

@@ -3,6 +3,13 @@
   App.FoundationExtras = {
     initialize: function() {
       $(document).foundation();
+    },
+    destroy: function() {
+      if ($(".sticky").length > 0) {
+        $(".sticky").foundation("_destroy");
+      }
     }
   };
+
+  $(document).on("turbolinks:before-visit", App.FoundationExtras.destroy);
 }).call(this);

app/assets/stylesheets/application.scss

@@ -26,3 +26,4 @@
 @import "autocomplete_overrides";
 @import "jquery-ui/sortable";
 @import "leaflet";
+@import "sticky_overrides";

app/assets/stylesheets/sticky_overrides.scss

@@ -0,0 +1,9 @@
+// Overrides styles of foundation-sticky
+
+// Patch authored by shashabeep
+// Check https://github.com/foundation/foundation-sites/issues/11098#issuecomment-528363771
+.proposal-show {
+  .sticky.is-anchored {
+    top: 0 !important;
+  }
+}

spec/system/proposals_spec.rb

@@ -212,6 +212,19 @@ describe "Proposals" do
     end
   end
 
+  describe "Sticky support button on medium and up screens", :js do
+    scenario "is shown anchored to top" do
+      proposal = create(:proposal)
+      visit proposals_path
+
+      click_link proposal.title
+
+      within("#proposal_sticky") do
+        expect(find(".is-anchored")).to match_style(top: "0px")
+      end
+    end
+  end
+
   describe "Show sticky support button on mobile screens", :js do
     let!(:window_size) { Capybara.current_window.size }